Webpack配置-Babel深入解析

初识Babel以及Babel作用

Babel的使用

• 安装库

  • @babel/core：babel的核心代码，必须安装；
  • @babel/cli：可以让我们在命令行使用babel；
    安装命令： yarn add @babel/cli @babel/core -D

• 命令行的使用方式

  命令参数说明：src/test-babel目标文件夹 --out-dir指定要输出的文件夹
  命令： npx babel src/test-babel --out-dir dist,转换完成的代码如下： 发现此时的 es6代码还是 es6并没有被转换，也就验证了上文所说的 babel是个工具链，里面仅仅含有最基础的功能代码，如果需要做到转换需要配置一些插件来实现

• 插件的使用

  上文babel安装完成之后转换发现 es6代码并没有被转换 const还在箭头函数也在，上文也说过需要一些插件去实现相应的功能这里用到的插件就是
  • @babel/plugin-transform-arrow-functions转换箭头函数
    安装命令: yarn add @babel/plugin-transform-arrow-functions -D
    使用命令：npx babel src/test-babel --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
  • @babel/plugin-transform-block-scoping转换一些关键字
    安装命令：yarn add @babel/plugin-transform-block-scoping -D
    使用命令：npx babel src/test-babel --out-dir dist --plugins=@babel/plugin-transform-block-scoping
  • 两个插件同时使用
    命令：npx babel src/test-babel --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

• Babel的预设preset

  上文中使用插件如果多个插件的话需要将多个插件都放到命令中，所以如果需要转换的东西比较多的话那么设置起来就比较麻烦，所以此时可以使用 preset，它与 plugins的区别就在于 plugins更像一个一个的工具，你想使用那个你就用哪个工具，而 preset就是一个工具合集，将所有的工具都给你。
  • 安装命令: yarn add @babel/preset-env -D
  • 使用命令: npx babel src/test-babel --out-dir dist --presets=@babel/preset-env

• babel-loader

  正常的开发中我们不可能每个文件都根据命令的方式去转换代码，一个是麻烦还一个是有可能遗忘按个文件，所以此时我们可以借助 webpack通过配置 babel来对项目文件进行处理，这里就需要用到 babel-loader
  • 安装命令: yarn add babel-loader -D
  • 配置方式: 和配置其他 loader的方式一样如下图： 同样的也需要配合一下插件或者预设
  • 插件配置方式: 打包结果：
  • 预设配置方式: 打包结果

• 设置目标浏览器

  两种方式：
  1. 通过给预设添加 targets来设置目标浏览器具体方式如下：
  2. browserslist将 css-loader有说过这里就不多说了（这里更推荐这种方式设置）

• Babel的配置文件

  和 webpack一样可以将配置单独写在一个文件中
  • babel.config.json（或者.js，.cjs，.mjs）文件；
  • .babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件； 两者的区别在于.babelrc.json早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的；babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐； 具体配置如下：

• polyfill的使用

  polyfill可以说是一个补丁，比如平时我们写代码的时候用到了一些特性（Promise），而此时浏览器并不认识这些特性所以此时就可以打一个不定填充一个 Promise此时浏览器就包含了这个特性
  • 安装依赖
    babel7.4.0之前，可以使用 @babel/polyfill的包，但是该包现在已经不推荐使用了：官方文档上面也有相应的说明 现在使用 core-js/stable和regenerator-runtime/runtime替代
    安装：yarn add core-js regenerator-runtime应为这里生产环境也会用到对应库的代码所以这里直接添加到 dependencies依赖
  • 使用
    配置中添加两个参数：
    1. useBuiltIns：规定以什么样的方式使用 polyfill
       • false: 不用任何的polyfill相关的代码
       • usage: 代码中需要哪些polyfill, 就引用相关的api
       • entry: 如果我们依赖的某一个库本身使用了某些polyfill的特性，但是因为我们使用的是usage，所以之后用户浏览器可能会报错此时就可以使用该属性；手动在入口文件中导入core-js/regenerator-runtime, 根据目标浏览器引入所有对应的polyfill这样做会根据 browserslist 目标导入所有的polyfill，但是对应的包也会变大；
    2. corejs：设置 corejs版本

• Plugin-transform-runtime

  主要是自己编写工具库的时候会用到，如果工具库中需要用到 polyfill，然后工具库通过polyfill添加的特性别人在使用我们的工具库的时候工具库生成的 polyfill会污染使用者的代码所以此时可以使用Plugin-transform-runtime

• React的jsx支持

  一般我们写 react的时候使用的是 jsx语法，但是浏览器并不能人事 jsx语法所以此时就需要将 jsx语法进行转换,具体用到的插件如下:
  • @babel/plugin-syntax-jsx
  • @babel/plugin-transform-react-jsx
  • @babel/plugin-transform-react-display-name 但是我们配置并不需要这么多插件直接通过预设来配置就好 @babel/preset-react具体配置如下：

• 加载TypeScript

  加载 TypeScript有两种方式一个是通过 ts-loader加载还一个是通过 babel-loader
  • ts-loader
    应为浏览器是不支持 ts代码的所以这里需要将 ts代码转换成 js代码所以需要用到 typescript安装方式如下 yarn install typescript -D通常会编写一个tsconfig.json文件，之后之后我们可以运行 npx tsc来编译自己的ts代码会读取配置文件中的配置，同时这里可以使用 tsc --init生成该配置文件如下图: 此时就可以转换 ts代码了，但是每个文件都转换肯定影响效率所以这个时候可以使用 ts-loader配合 webpack进行转换
    • 安装命令
      yarn add ts-loader -D
    • 配置
      打包结果如下：
      发现 ts代码呗转换成了普通的代码
  • babel-loader 使用babel-loader打包可以使用插件@babel/tranform-typescript；也可以使用预设@babel/preset-typescript建议还是使用预设，
    • 安装
      yarn add @babel/preset-typescript -D
    • 配置 运行结果如下：
  • 优缺点
    1. babel-loader仅仅是对文件进行转换而不做校验
    2. ts-loader能做代码校验但是如果代码中有用到特性又没办法添加 polyfill 所以在一般的项目中如果代码中有用到语言特性就不建议使用ts-loader，为了添加类型校验的功能，这里可以使用type-check可以对ts代码的类型进行检测：

    • 安装type-check
yarn add type-check -D

    • 配置使用： 也可以实时的查看编代码的问题如下图：

      总结: 项目实战中还是建议使用 babel-loader配合 type-check来实现 `ts

Babel编译器的执行原理分析