一、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
