09_Vue3组件化之webpack5篇(三)

Vue3组件化之webpack5篇(三)

为什么需要babel&＃xff1f;

事实上&＃xff0c;在开发中我们很少直接去接触babel&＃xff0c;但是babel对于前端开发来说&＃xff0c;目前是不可缺少的一部分&＃xff1a;

• 开发中&＃xff0c;我们想要使用ES6&＃43;的语法&＃xff0c;想要使用TypeScript&＃xff0c;开发React项目&＃xff0c;它们都是离不开Babel的&＃xff1b;
• 所以&＃xff0c;学习Babel对于我们理解代码从编写到线上的转变过程至关重要&＃xff1b;

那么&＃xff0c;Babel到底是什么呢&＃xff1f;

• Babel是一个工具链&＃xff0c;主要用于旧浏览器或者环境中将ECMAScript 2015&＃43;代码转换为向后兼容版本的Javascript&＃xff1b;

• 包括&＃xff1a;语法转换、源代码转换等&＃xff1b;

Babel命令行使用

babel本身可以作为一个独立的工具&＃xff08;和postcss一样&＃xff09;&＃xff0c;不和webpack等构建工具配置来单独使用。

如果我们希望在命令行尝试使用babel&＃xff0c;需要安装如下库&＃xff1a;

• &＃64;babel/core&＃xff1a;babel的核心代码&＃xff0c;必须安装&＃xff1b;
• &＃64;babel/cli&＃xff1a;可以让我们在命令行使用babel&＃xff1b;

使用babel来处理我们的源代码&＃xff1a;npm install &＃64;babel/cli &＃64;babel/core -D

• src&＃xff1a;是源文件的目录&＃xff1b;

• –out-dir&＃xff1a;指定要输出的文件夹dist&＃xff1b;

• npx babel src --out-dir dist

插件的使用

比如我们需要转换箭头函数&＃xff0c;那么我们就可以使用箭头函数转换相关的插件&＃xff1a;

• npm install &＃64;babel/plugin-transform-arrow-functions -D
• npx babel src --out-dir dist --plugins&＃61;&＃64;babel/plugin-transform-arrow-functions

查看转换后的结果&＃xff1a;我们会发现 const 并没有转成 var

• 这是因为 plugin-transform-arrow-functions&＃xff0c;并没有提供这样的功能&＃xff1b;

• 我们需要使用 plugin-transform-block-scoping 来完成这样的功能&＃xff1b;

• npm install &＃64;babel/plugin-transform-block-scoping -D

• npx babel src --out-dir dist --plugins&＃61;&＃64;babel/plugin-transform-block-scoping,&＃64;babel/plugin-transform-arrow-functions

Babel的预设preset

但是如果要转换的内容过多&＃xff0c;一个个设置是比较麻烦的&＃xff0c;我们可以使用预设&＃xff08;preset&＃xff09;&＃xff1a;

后面我们再具体来讲预设代表的含义&＃xff1b;

安装&＃64;babel/preset-env预设&＃xff1a;npm install &＃64;babel/preset-env -D

执行如下命令&＃xff1a;npx babel src --out-dir dist --presets&＃61;&＃64;babel/preset-env

Babel的底层原理

babel是如何做到将我们的**一段代码&＃xff08;ES6、TypeScript、React&＃xff09;转成另外一段代码&＃xff08;ES5&＃xff09;**的呢&＃xff1f;

• 从一种源代码&＃xff08;原生语言&＃xff09;转换成另一种源代码&＃xff08;目标语言&＃xff09;&＃xff0c;这是什么的工作呢&＃xff1f;
• 就是编译器&＃xff0c;事实上我们可以将babel看成就是一个编译器。
• Babel编译器的作用就是将我们的源代码&＃xff0c;转换成浏览器可以直接识别的另外一段源代码&＃xff1b;

Babel也拥有编译器的工作流程&＃xff1a;

• 解析阶段&＃xff08;Parsing&＃xff09;
• 转换阶段&＃xff08;Transformation&＃xff09;
• 生成阶段&＃xff08;Code Generation&＃xff09;

https://github.com/jamiebuilds/the-super-tiny-compiler

Babel编译器执行原理

Babel的执行阶段 :

当然&＃xff0c;这只是一个简化版的编译器工具流程&＃xff0c;在每个阶段又会有自己具体的工作&＃xff1a;

babel-loader

在实际开发中&＃xff0c;我们通常会在构建工具中通过配置babel来对其进行使用的&＃xff0c;比如在webpack中。

那么我们就需要去安装相关的依赖&＃xff1a;

如果之前已经安装了&＃64;babel/core&＃xff0c;那么这里不需要再次安装&＃xff1b;npm install babel-loader -D

我们可以设置一个规则&＃xff0c;在加载js文件时&＃xff0c;使用我们的babel&＃xff1a;

指定使用的插件

babel-preset

如果我们一个个去安装使用插件&＃xff0c;那么需要手动来管理大量的babel插件&＃xff0c;我们可以直接给webpack提供一个preset&＃xff0c;webpack会根据我们的预设来加载对应的插件列表&＃xff0c;并且将其传递给babel。

比如常见的预设有三个&＃xff1a;

• env
• react
• TypeScript

安装preset-env&＃xff1a;npm install &＃64;babel/preset-env -D

Babel的配置文件

像之前一样&＃xff0c;我们可以将babel的配置信息放到一个独立的文件中&＃xff0c;babel给我们提供了两种配置文件的编写&＃xff1a;

• babel.config.json&＃xff08;或者.js&＃xff0c;.cjs&＃xff0c;.mjs&＃xff09;文件&＃xff1b;
• .babelrc.json&＃xff08;或者.babelrc&＃xff0c;.js&＃xff0c;.cjs&＃xff0c;.mjs&＃xff09;文件&＃xff1b;

它们两个有什么区别呢&＃xff1f;目前很多的项目都采用了多包管理的方式&＃xff08;babel本身、element-plus、umi等&＃xff09;&＃xff1b;

• .babelrc.json&＃xff1a;早期使用较多的配置方式&＃xff0c;但是对于配置Monorepos项目是比较麻烦的&＃xff1b;
• babel.config.json&＃xff08;babel7&＃xff09;&＃xff1a;可以直接作用于Monorepos项目的子包&＃xff0c;更加推荐&＃xff1b;

Vue源码的打包

我们主要是学习Vue的&＃xff0c;那么我们应该包含Vue相关的代码&＃xff1a;

界面上是没有效果的&＃xff1a;并且我们查看运行的控制台&＃xff0c;会发现如下的警告信息&＃xff1b;

Vue打包后不同版本解析

vue(.runtime).global(.prod).js&＃xff1a;

• 通过浏览器中的 script src&＃61;"…"直接使用&＃xff1b;
• 我们之前通过CDN引入和下载的Vue版本就是这个版本&＃xff1b;
• 会暴露一个全局的Vue来使用&＃xff1b;

vue(.runtime).esm-browser(.prod).js&＃xff1a;

• 用于通过原生 ES 模块导入使用 (在浏览器中通过

vue(.runtime).esm-bundler.js&＃xff1a;

• 用于 webpack&＃xff0c;rollup 和 parcel 等构建工具&＃xff1b;
• 构建工具中默认是vue.runtime.esm-bundler.js&＃xff1b;
• 如果我们需要解析模板template&＃xff0c;那么需要手动指定vue.esm-bundler.js&＃xff1b;

vue.cjs(.prod).js&＃xff1a;

• 服务器端渲染使用&＃xff1b;
• 通过require()在Node.js中使用&＃xff1b;

运行时&＃43;编译器 vs 仅运行时

在Vue的开发过程中我们有三种方式来编写DOM元素&＃xff1a;

• 方式一&＃xff1a;template模板的方式&＃xff08;之前经常使用的方式&＃xff09;&＃xff1b;

• 方式二&＃xff1a;render函数的方式&＃xff0c;使用h函数来编写渲染的内容&＃xff1b;

• 方式三&＃xff1a;通过.vue文件中的template来编写模板&＃xff1b;

  它们的模板分别是如何处理的呢&＃xff1f;

• 方式二中的h函数可以直接返回一个虚拟节点&＃xff0c;也就是Vnode节点&＃xff1b;

• 方式一和方式三的template都需要有特定的代码来对其进行解析&＃xff1a;

  • 方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理&＃xff1b;
  • 方式一种的template我们必须要通过源码中一部分代码来进行编译&＃xff1b;

所以&＃xff0c;Vue在让我们选择版本的时候分为 运行时&＃43;编译器 vs 仅运行时

• 运行时&＃43;编译器包含了对template模板的编译代码&＃xff0c;更加完整&＃xff0c;但是也更大一些&＃xff1b;
• 仅运行时没有包含对template版本的编译代码&＃xff0c;相对更小一些&＃xff1b;

VSCode对SFC文件的支持

在前面我们提到过&＃xff0c;真实开发中多数情况下我们都是使用SFC&＃xff08; single-file components (单文件组件) &＃xff09;。

我们先说一下VSCode对SFC的支持&＃xff1a;

• 插件一&＃xff1a;Vetur&＃xff0c;从Vue2开发就一直在使用的VSCode支持Vue的插件&＃xff1b;
• 插件二&＃xff1a;Volar&＃xff0c;官方推荐的插件&＃xff08;后续会基于Volar开发官方的VSCode插件&＃xff09;&＃xff1b;

编写App.vue代码

接下来我们编写自己的App.vue代码&＃xff1a;

App.vue的打包过程

我们对代码打包会报错&＃xff1a;我们需要合适的Loader来处理文件。

这个时候我们需要使用vue-loader&＃xff1a; npm install vue-loader -D

在webpack的模板规则中进行配置&＃xff1a;

&＃64;vue/compiler-sfc

打包依然会报错&＃xff0c;这是因为我们必须添加&＃64;vue/compiler-sfc来对template进行解析&＃xff1a; npm install &＃64;vue/compiler-sfc -D

另外我们需要配置对应的Vue插件&＃xff1a;

重新打包即可支持App.vue的写法

全局标识的配置

我们会发现控制台还有另外的一个警告&＃xff1a;

在GitHub上的文档中我们可以找到说明:

• 这是两个特性的标识&＃xff0c;一个是使用Vue的Options&＃xff0c;一个是Production模式下是否支持devtools工具&＃xff1b;
• 虽然他们都有默认值&＃xff0c;但是强烈建议我们手动对他们进行配置&＃xff1b;

以上学习自coderwhy老师的Vue3&＃43;ts课程&＃xff01;