5. 重学webpack——webpack5.0之JS转换(配置、babel各类插件相互调用及作用)和装饰器使用

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

1. 那么多babel相关的包，到底是怎么运转的？（重点）

• babel可以实现对代码的转换，比如可以把ES6变成ES5，转换靠的工具是babel-loader

• babel-loader会调用@babel/core来转换

• @bable/core是转换的引擎，虽然core可以识别js代码，但是它不知道如何转换，需要靠预设@babel/preset-env

• @babel/preset-env 这是一个预设，预设是插件的集合，插件才是真正把新的ES6代码转换成ES5代码。

  • 也就是说ES6语法很多，需要各种插件去转换，把这些插件打成一个包，这个包被称为preset预设。
  • 所以，配完预设，就相当于配了一堆插件

• @babel/@babel/preset-react：React插件的Babel预设

• 预设虽然有很多插件，但是并不是所有转换所有语法的插件都在，有些需要单独安装插件，比如：

  • @bable/plugin-proposal-decorators 把类和对象装饰器编译成ES5
  • @babel/plugin-proposal-class-properties 转换静态类属性以及使用属性初始值化语法声明的属性

2.webpack中babel的配置

• 安装依赖:

  cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react  -D
  cnpm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
  

• webpack.config.js中的配置

  module: {
      rules: [
        {
          test: /\.jsx?$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [["@babel/preset-env",{
                targets: "> 0.25%, not dead",
              }], '@babel/preset-react'],
              plugins: [
                ['@babel/plugin-proposal-decorators', { legacy: true }],
                ['@babel/plugin-proposal-class-properties', { loose: true }],
              ],
            },
          },
        },
      ]
  }
  

3.装饰器的使用

• 先看下代码：

  // index.js
  /*
  	descriptor有三个属性和一个方法:
  	三个属性：
          writable
          configurable
          enumerable
      一个方法：
      	initializer
  */ 
  functionreadonly(target, key, descriptor){
      // target是使用到的目标类，这里是Circle这个类
      // key是使用到的目标属性，这里是PI
      // descriptor是属性的描述器，有三个属性writable、configurable、enumerable,一个方法：initializer初始化器
      descriptor.writable = false; // 对象的这个属性不可修改
  }
  
  class Circle{
      @readonly PI = 3.14;
  }
  
  let c1 = new Circle();
  c1.PI = 10;
  console.log(c1.PI); // 打印出来依旧是3.14
  
  // 配置文件jsconfig.json
  {
   	“compilerOptions”: { // 编译选项
          "experimentalDecorators": true // 实验性的语法装饰器是否支持：支持
      }   
  }
  

• 装饰器的用法

  • 装饰器是一个函数，有三个参数，分别为：
    • target是使用到的目标类，这里是Circle这个类
    • key是使用到的目标属性，这里是PI
    • descriptor是属性的描述器，
    • 描述其有：
      • 三个属性writable、configurable、enumerable
      • 一个方法：initializer初始化器
  • 装饰器用@装饰器名称来使用，见代码

• 装饰器配置文件

  由于装饰器语法是实验性语法，未来有可能会改变，所以需要配置一个装饰器配置文件，见代码