Vue3+TS Day08 - webpack Babel、we

一、Babel

1、为什么需要 Babel？

• 事实上，在开发中我们很少直接去接触 Babel，但是 babel 对于前端开发来说，目前是不可缺少的一部分；
• 开发中，我们想要使用 ES6+ 的语法，想要使用 TypeScript，开发 React 项目，它们都离不开 Babel 的
• 所以，学习 Babel 对于我们理解代码从编写到线上的转变过程至关重要；

image.png

2、如何用命令行借助 Babel 把下面代码，转成 ES5 的代码（部分浏览器不支持 ES6 语法）？

image.png image.png

3、像上面每个语法解析调用对应插件，如果有非常多语法，就需要很多解析器。有没有一个统一配置好的转换集合呢？

• 但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用【预设 preset】

image.png

4、简单描述一下 Babel 的底层原理（或者说工作流程）？

image.png image.png

5、在 webpack 中配置 babel？

image.png image.png image.png image.png

二、webpac 中配置 vue 环境

1、vue 当成 js 模块引入的方式

• 安装下面 loader

    "vue": "^3.2.23"  // vue@next 依赖于

• 然后引入 vue 模块，使用 createApp

import { createApp } from "vue/dist/vue.esm-bundler"; // 这个 vue 版本才有对 template 的解析能力

createApp({
    template: '<h2>我是 vue 静态内容</h2>',
    data() {
        return {
            title: "我是vue标题",
            content: "我是 vue 内容"
        }
    }
}).mount('#app');

image.png image.png

2、对 vue 各个版本的认识？运行时+编译器 vs 仅运行时 ？

image.png image.png

3、VSCode 对 SFC文件的支持，选择哪个插件好？

image.png

4、在题1中，所有 vue 相关代码都揉到一块，不利于解耦和维护，怎么把代码抽离到 SFC(.vue)文件中呢？

image.png image.png image.png