生产环境处理js

需要安装:

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

eslint检查(生产环境简洁版)

// 配置rules
// 该检查需要设置enforce为pre, 即先于所有js的rule最先执行
// 因为后面兼容性处理如果先执行了,更改后的代码可能不通过检查
// 并且如果检查都不通过就不需要js的其他处理了
{
  test: /\.js$/,
  // 优先执行, 在兼容性和压缩之前
  enforce: 'pre',
  // **不检查node_modules中的
  exclude: /node_modules/,
  // 使用eslint-loader检查js, 设置完了之后需要设置根据什么来检查js
  // 在package.json中配置
  loader: 'eslint-loader',
  options: {
  // 检查的问题自动修复
    fix: true
  }
}

// package.json
// eslint-loader基于什么规则来检查js
"eslintConfig": {
  // 继承自aitbnb-base规则来检查
  "extends": "airbnb-base",
  "env": {
    "browser": true
  }
} 

兼容性处理

 // 兼容性处理
  {
    test: /\.js$/,
    // 使用babel处理兼容性问题, babel-loader用于解析
    // 规则是core.js, 插件为preset-env
    // **不检查这里
    exclude: /node_modules/,
    loader: 'babel-loader',
    // 记住上面需要使用babel-loader即可
    // 下面的options中的写法基本是固定但是
    options: {
      // 预设, 配置babel做什么样的兼容性处理
      presets: [
        // 这里还需要一层中括号
        [
          '@babel/preset-env',
          {
            // 按需加载
            useBuiltIns: 'usage',
            // 指定core.js版本
            corejs: {
              version: 3
            },
            // 兼容性做到哪个版本的浏览器
            targets: {
              chrome: '60',
              firefox: '60',
              ie: '9',
              safari: '10',
              edge: '17'
            }
          }
        ]
      ]
    }
  }

js压缩

// mode改成production则自动压缩js代码
  mode: 'development'

关于js的处理不要引入什么, 就按照上面配置rules即可