codeywhy Vue3+Typescript学习笔记（八）Babel解析js-vue，Vue文件打包，devServer，HMR，config配置

一. Babel

1. 为什么需要babel？

• 事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：
  • 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
  • 所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；
• 那么，Babel到底是什么呢？
  • Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；
  • 包括：语法转换、源代码转换等；
    

2. Babel命令行使用

• babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。
• 如果我们希望在命令行尝试使用babel，需要安装如下库：
  • @babel/core：babel的核心代码，必须安装；
  • @babel/cli：可以让我们在命令行使用babel；
    npm install @babel/cli @babel/core -D
• 使用babel来处理我们的源代码：
  • src：是源文件的目录；
  • –out-dir：指定要输出的文件夹dist；
    npx babel src --out-dir dist

3. 插件的使用

• 比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：
  npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

• 查看转换后的结果：我们会发现 const 并没有转成 var

  • 这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
  • 我们需要使用 plugin-transform-block-scoping 来完成这样的功能；
    npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping ,@babel/plugin-transform-arrow-functions

4.Babel的预设preset

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

  • 后面我们再具体来讲预设代表的含义；

• 安装@babel/preset-env预设：
  npm install @babel/preset-env -D

• 执行如下命令：
  npx babel src --out-dir dist --presets=@babel/preset-env

5. Babel的底层原理

• babel是如何做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的呢？
  • 从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
  • 就是编译器，事实上我们可以将babel看成就是一个编译器。
  • Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；
• Babel也拥有编译器的工作流程：
  • 解析阶段（Parsing）
  • 转换阶段（Transformation）
  • 生成阶段（Code Generation）
• https://github.com/jamiebuilds/the-super-tiny-compiler

6. Babel编译器执行原理

• Babel的执行阶段
  
• 当然，这只是一个简化版的编译器工具流程，在每个阶段又会有自己具体的工作：
  

7. babel-loader

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

• 那么我们就需要去安装相关的依赖：

  • 如果之前已经安装了@babel/core，那么这里不需要再次安装；
    npm install babel-loader @babel/core

• 我们可以设置一个规则，在加载js文件时，使用我们的babel：
  

指定使用的插件

• 我们必须指定使用的插件才会生效
  

8. babel-preset

• 如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个
  preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。
• 比如常见的预设有三个：
  • env
  • react
  • TypeScript
• 安装preset-env：
  npm install @babel/preset-env

9. Babel的配置文件

• 像之前一样，我们可以将babel的配置信息放到一个独立的文件中，babel给我们提供了两种配置文件的编写：
  • babel.config.json（或者.js，.cjs，.mjs）文件；
  • .babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件；
• 它们两个有什么区别呢？目前很多的项目都采用了多包管理的方式（babel本身、element-plus、umi等）；
  • .babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的；
  • babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐
    

二. Vue文件打包

1. Vue源码的打包

1.1 Vue3安装与代码编写

• 我们课程主要是学习Vue的，那么我们应该包含Vue相关的代码：
• 首先安装vue3
  npm install vue@next
  
• 界面上是没有效果的：
  • 并且我们查看运行的控制台，会发现如下的警告信息；
    
    是template的渲染出了问题，runtime版本对template解析不了

1.2. Vue打包后不同版本解析

• vue(.runtime).global(.prod).js：
  • 通过浏览器中的<script src=“...”>直接使用；
  • 我们之前通过CDN引入和下载的Vue版本就是这个版本；
  • 会暴露一个全局的Vue来使用；
• vue(.runtime).esm-browser(.prod).js：
  • 用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type="module"> 来使用)。
• vue(.runtime).esm-bundler.js：
  • 用于 webpack，rollup 和 parcel 等构建工具；
  • 构建工具中默认是vue.runtime.esm-bundler.js； p 如果我们需要解析模板template，那么需要手动指定vue.esm-bundler.js；
• vue.cjs(.prod).js：
  • 服务器端渲染使用；
  • 通过require()在Node.js中使用；

手动指定版本：

1.3. 运行时+编译器 vs 仅运行时

• 在Vue的开发过程中我们有三种方式来编写DOM元素：
  • 方式一：template模板的方式（之前经常使用的方式）；
  • 方式二：render函数的方式，使用h函数来编写渲染的内容；
  • 方式三：通过.vue文件中的template来编写模板；
• 它们的模板分别是如何处理的呢？
  • 方式二中的h函数可以直接返回一个虚拟节点，也就是Vnode节点；
  • 方式一和方式三的template都需要有特定的代码来对其进行解析：
    • 方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理；
    • 方式一种的template我们必须要通过源码中一部分代码来进行编译；
• 所以，Vue在让我们选择版本的时候分为 运行时+编译器 vs 仅运行时
  • 运行时+编译器包含了对template模板的编译代码，更加完整，但是也更大一些；
  • 仅运行时没有包含对template版本的编译代码，相对更小一些；

2. vue单文件打包

2.1.VSCode对SFC文件的支持

• 在前面我们提到过，真实开发中多数情况下我们都是使用SFC（ single-file components (单文件组件) ）。
• 我们先说一下VSCode对SFC的支持：
  • 插件一：Vetur，从Vue2开发就一直在使用的VSCode支持Vue的插件；
  • 插件二：Volar，官方推荐的插件（后续会基于Volar开发官方的VSCode插件），主要对Vue3和Ts；

2.2. 编写App.vue代码

接下来我们编写自己的App.vue代码：

2.3. App.vue的打包过程

• 我们对代码打包会报错：我们需要合适的Loader来处理.vue文件。
  
• 这个时候我们需要使用vue-loader：
  npm install vue-loader@next -D
• 在webpack的模板规则中进行配置：
  

2.4. @vue/compiler-sfc

• 打包依然会报错，这是因为我们必须添加@vue/compiler-sfc来对template进行解析：
  npm install @vue/compiler-sfc -D

• 另外我们需要配置对应的Vue插件：
  

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

• 另外，我们也可以编写其他的.vue文件来编写自己的组件；

3. 全局标识的配置

我们会发现控制台还有另外的一个警告：

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

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

二. 本地服务器/HMR/其他配置

1. 为什么要搭建本地服务器？

• 目前我们开发的代码，为了运行需要有两个操作：
  • 操作一：npm run build，编译相关的代码；
  • 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；
• 这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示；
• 为了完成自动编译，webpack提供了几种可选的方式：
  • webpack watch mode；
  • webpack-dev-server（常用）；
  • webpack-dev-middleware；

1.1 Webpack watch

• webpack给我们提供了watch模式：
  • 在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译；
  • 我们不需要手动去运行 npm run build指令了；
• 如何开启watch呢？两种方式：
  • 方式一：在导出的配置中，添加 watch: true；
  • 方式二：在启动webpack的命令中，添加 --watch的标识；
• 这里我们选择方式二，在package.json的 scripts 中添加一个 watch 的脚本：
  

1.2 webpack-dev-server

• 上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的：
  • 当然，目前我们可以在VSCode中使用live-server来完成这样的功能；
  • 但是，我们希望在不适用live-server的情况下，可以具备live reloading（实时重新加载）的功能；
• 安装webpack-dev-server
  npm install webpack-dev-server -D
• 修改配置文件，告知 dev server，从什么位置查找文件：
  
• webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中：
  • 事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）

2. HMR

2.1 认识模块热替换（HMR）

• 什么是HMR呢？
  • HMR的全称是Hot Module Replacement，翻译为模块热替换；
  • 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；
• HMR通过如下几种方式，来提高开发的速度：
  • 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
  • 只更新需要变化的内容，节省开发的时间；
  • 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；
• 如何使用HMR呢？
  • 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；
  • 在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；

2.2 开启HMR

• 修改webpack的配置
  
• 浏览器可以看到如下效果：
  
• 但是你会发现，当我们修改了某一个模块的代码时，依然是刷新的整个页面：
  • 这是因为我们需要去指定哪些模块发生更新时，进行HMR；
    

2.3 框架的HMR

• 有一个问题：在开发其他项目时，我们是否需要经常手动去写入 module.hot.accpet相关的API呢？
  • 比如开发Vue、React项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？
  • 事实上社区已经针对这些有很成熟的解决方案了：
  • 比如vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；
  • 比如react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用reactrefresh）；
• 接下来我们来演示一下Vue实现一下HMR功能

2.4 HMR的原理

• 那么HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？
  • webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）；
  • express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；
• HMR Socket Server，是一个socket的长连接：
  • 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
  • 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）；
  • 通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）；
  • 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；

HMR的原理图

2.5 hotOnly、host配置

• host设置主机地址：
  • 默认值是localhost；
  • 如果希望其他地方也可以访问，可以设置为 0.0.0.0；
• localhost 和 0.0.0.0 的区别：
  • localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1;
  • 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收;
    • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;
    • 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的;
    • 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的;
  • 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序;
    • 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的;

3.port、open、compress

• port设置监听的端口，默认情况下是8080
• open是否打开浏览器：
  • 默认值是false，设置为true会打开浏览器；
  • 也可以设置为类似于 Google Chrome等值；
• compress是否为静态文件开启gzip compression：
  • 默认值是false，可以设置为true；
    

4. Proxy

• proxy是我们开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题：
  • 比如我们的一个api请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:8000，这个时候发送网络请求就会出现跨域的问题；
  • 那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域的问题，就可以解决我们的跨
    域问题了；
• 我们可以进行如下的设置：
  • target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api- hy/moment；
  • pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite；
  • secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；
  • changeOrigin：它表示是否更新代理后请求的headers中host地址；

changeOrigin的解析

• 这个 changeOrigin官方说的非常模糊，通过查看源码我发现其实是要修改代理请求中的headers中的host属性：
  • 因为我们真实的请求，其实是需要通过 http://localhost:8888来请求的；
  • 但是因为使用了代码，默认情况下它的值时 http://localhost:8000；
  • 如果我们需要修改，那么可以将changeOrigin设置为true即可；
    

5. historyApiFallback

• historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新
  时，返回404的错误。
• boolean值：默认是false
  • 如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容；
• object类型的值，可以配置rewrites属性：
  • 可以配置from来匹配路径，决定要跳转到哪一个页面；
• 事实上devServer中实现historyApiFallback功能是通过connect-history-api-fallback库的：
  • 可以查看connect-history-api-fallback 文档

6. resolve模块解析

• resolve用于设置模块如何被解析：
  • 在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；
  • resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；
  • webpack 使用 enhanced-resolve 来解析文件路径；
• webpack能解析三种文件路径：
• 绝对路径
  • 由于已经获得文件的绝对路径，因此不需要再做进一步解析。
• 相对路径
  • 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；
  • 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；
• 模块路径
  • 在 resolve.modules中指定的所有目录检索模块；
    • 默认值是 [‘node_modules’]，所以默认会从node_modules中查找文件；
  • 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置；

确定文件还是文件夹

• 如果是一个文件：

  • 如果文件具有扩展名，则直接打包文件；
  • 否则，将使用 resolve.extensions选项作为文件扩展名解析；

• 如果是一个文件夹：

  • 会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；
    • resolve.mainFiles的默认值是 [‘index’]；
    • 再根据 resolve.extensions来解析扩展名

7. extensions和alias配置

• extensions是解析到文件时自动添加扩展名：
  • 默认值是 ['.wasm', '.mjs', '.js', '.json']；
  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；
• 另一个非常好用的功能是配置别名alias：
  • 特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 ../../../这种路径片段；
  • 我们可以给某些常见的路径起一个别名；