转化ES6及更高级语法

https://www.babeljs.cn/setup#installation

//  babel 是一个 JavaScript 编译器 ,把高级的js语法转为低级的语法
//                         核心包           能转换所有的 es **相关的语法        
yarn add babel-loader @babel/core @babel/preset-env -D

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { // 用babel-loader,需要把es6-->es5
            presets: [ // 插件库
              '@babel/preset-env'
            ],
            exclude: path.resolve(__dirname, 'node_modules'),
          }
        }
      },
    ]
  }

处理其他更高级的语法,如

class A { //等于 new A() a = 1
  a = 1
}
let a = new A()
console.log(a.a)

yarn add @babel/plugin-proposal-class-properties -D

import()....

yarn add @babel/plugin-syntax-dynamic-import -D

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

处理js语法及校验

https://babeljs.io/docs/en/babel-plugin-transform-runtime#docsNav
内置的API,需要帮助加代码

function * gen(params) {
  yield 1;
}
console.log(gen().next())

yarn add @babel/plugin-transform-runtime -D // 开发环境
yarn add  @babel/runtime   // production

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              "@babel/plugin-transform-runtime"
            ],
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/,
          }
        }
      }
    ]
  }

处理更高级的语法

console.log('includes语法', 'aaa'.includes('b'))

yarn add @babel/polyfill

require ('@babel/polyfill')
console.log('includes语法', 'aaa'.includes('b'))

js校验

https://eslint.bootcss.com/docs/user-guide/getting-started

yarn add eslint eslint-loader -D

获取配置文件.eslintrc.json 放入目录中：https://eslint.org/demo

  module: {
    rules: [
      {
        enforce: 'pre',  // 强制先执行  参数：默认normal,  pre/post
        test: /\.js$/,
        use: {
          loader: 'eslint-loader',
          options: {
            fix: true,
          },
          exclude: /node_modules/
        }
      }
   ]
}

补充

yarn add babel-eslint babel-jest -D