Webpack 处理 JS

转译 JS

  • 安装

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #babel转译 核心代码 和 所需插件集合
    npm install -D babel-loader @babel/core @babel/preset-env

    #支持 @decorators 语法
    npm install -D @babel/plugin-proposal-decorators

    #支持类语法
    npm install -D @babel/plugin-proposal-class-properties

    #复用 babel 生成的各种 helper 函数,并提供沙箱环境避免污染全局
    npm install --save-dev @babel/plugin-transform-runtime
    npm install --save @babel/runtime-corejs3
  • 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    module: {
    rules: [
    {
    test: /\.m?js$/,
    exclude: /(node_module|bower_components)/,
    use: {
    loader: "babel-loader",
    options: {
    presets: ["@babel/preset-env"],
    plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    ["@babel/plugin-transform-runtime", { corejs: 3 }],
    ],
    },
    },
    },
    ],
    },

校验 JS

  • 安装

    1
    npm install -D eslint eslint-loader babel-eslint
  • 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    module: {
    rules: [
    {
    enforce: 'pre',
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'eslint-loader',
    },
    {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    },
    ],
    },

    在 .eslintrc.json 中,将 babel-eslint 配置成 eslint 的解析器:

    1
    2
    3
    4
    5
    6
    {
    "parser": "babel-eslint",
    "parserOptions": {
    //...
    },
    }