使用 Babel

作用

将新的语法转换为老的语法。

安装

npm i babel-loader @babel/core @babel/preset-env webpack -D

如果需要支持更加高级的ES6语法，可以安装以下插件：

npm i @babel/plugin-proposal-class-properties -D

:::warning @babel/plugin-proposal-class-properties 只是插件的一种，如果需要其他插件可以支官网下载并使用。 :::

配置 loader

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/env'], // 语法预设，有很多语法预设
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  },
  exclude: /node_modules/
}

官方更建议的做法是在项目目录下新建一个.babelrc的babel配置文件。

{
  "presets": ["@babel/env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

处理 generator

如果需要使用generator，无法直接使用Babel进行转换，因为会将generator转换为一个regeneratorRuntime，然后使用mark和wrap实现generator。但由于babel并没有内置regeneratorRuntime，所以无法直接使用。
需要安装插件：

npm i @babel/plugin-transform-runtime -D

同时还需要安装运行时依赖，注意是 -S

npm i @babel/runtime -S

在 .babelrc 中添加插件

{
  "presets": ["@babel/env"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-runtime"
  ]
}