Webpack4 学习笔记三 ES6+语法降级为ES5

前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

Webpack 将es6、es7语法降级为es5

需要通过 babel JavaScript编译器。

安装: npm i babel-loader、@babel/core、@babel/preset-env

plugins:
@babel/plugin-proposal-decorators --save-dev
@babel/plugin-proposal-class-properties --save-dev
@babel/plugin-transform-runtime: 它允许重新使用Babel注入的帮助程序代码来保存代码大小 --save-dev
@babel/runtime 这个要安装依赖到生产环境, 避免编译输出之间的重复 --save

如果你使用更高级的 ES6语法, 如 装饰器 @autobind、类的修饰,方法的修饰,使用新的写法定义类的属性
都配置在 loader: '@bable-loader'的options中

class N {
  name = qiqingfu;
  @autobind
  sayName() {
    console.log(this.name)
  }
}

const n = N()
n.name // qiqingfu
let { sayName } = n
sayName() // 1  修饰器@autobind  强制调用此函数以使其始终引用类实例

webpack配置:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            // babel-loader的一些配置选项
            options: {
              presets: [
                '@babel/preset-env'   // 将es6转换为 es5
              ],
              plugins: [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                ["@babel/transform-runtime"]
              ]
            }
          }
        ]
      },
      {
        // eslint
        test: /\.js$/,
      }
    ]
  }
}

可以配置多个loader,下面 /.js$/可以再配置 eslint, loader的执行顺序是自左向右,自下到上。所以需要先

ESLint

可组装的 JavaScript和JSX检查工具, 提供一个插件化的 JavaScript 代码检查工具。

Babel

Babel是一个工具链, 主要用于在旧的浏览器或环境中将 ECMAScript 2015+代码转换为向后兼容版本的。

• Plugins
• Presets

Plugins: 代码转换以插件的形式出现, 插件是小型的 JavaScript 程序, 它指示 Babel 如果对代码进行转换。

Presets: 如果想要转换代码中还有其它 ES2015+ 功能。可以使用 preset来代替预先设定的一组插件,
而不是逐一添加我们要想的插件。

笔记地址