js文件的处理

1. eslint格式化js文件

• 创建eslint配置文件(三种方法都可以)

  • .eslintrc
  • .eslintrc.js（推荐，注释方便，符合js习惯）
  • .eslintrc.json

• 基础的配置文件

  • module.exports = {
      // 解析器选项
      parserOptions: {
        ecmaVersion: 6, //支持的es语法版本
        sourceType: 'module', // es模块化
        ecmaFeatures: { // 支持的其他特性
          jsx: true, // 如果是react项目打开这个
        }
      },
      // eslint.bootcss.com/docs/rules/
      rules: {
        // key: value
        /**
         * key: 规则名
         * value: 规则的控制
         *  off/0 关闭该规则
         *  warn/1 警告级别
         *  error/2 错误级别
         */
        'no-var': 2,
        'no-unused-vars': 0
      },
      // 继承规则，比如: eslint 官方推荐规则
      extends: ['eslint:recommended'],
      env: {
        node: true, // node的全局内置api变量可用
        browser: true // bom模型的内置api变量可用
        es6: true // es6 新特性，比如：promise
      }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30

• 安装和使用插件（之前的版本使用 loader 处理）

• npm install eslint-webpack-plugin eslint --save-dev
  1

• const ESLintPlugin = require('eslint-webpack-plugin');
  
  module.exports = {
    // ...
    plugins: [new ESLintPlugin({
      context: path.join(__dirname, 'src') // 配置eslint检测范围
    })],
    // ...
  };
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 创建.eslintignore文件

  • vscode 的 eslint 插件也会扫描eslint配置文件，但它无法读取我们在webpack.config.js中设置的扫描范围，所以我们需要创建.eslintignore文件

  • // .eslintignore 文件
    
    dist
    1
    2
    3

2. babel 处理js兼容性

• 创建babel 配置文件

  • .babelrc

  • .babelrc.js( 推荐 )

  • .babelrc.json

  • module.exports = {
      // 预设
      // @babel/preset-env: 一个智能预设，允许使用最新的javascript语法（比如箭头函数, ...）
      presets: ['@babel/preset-env'],
    }
    1
    2
    3
    4
    5

• 安装依赖

• npm install -D babel-loader @babel/core @babel/preset-env
  
  1
  2

• 使用

• {
    test: /\.js$/,
    exclude: /(node_modules)/, // 设置哪些目录不需要扫描
    use: [{
      loader: 'babel-loader?cacheDirectory', //开启缓存，可以设置缓存目录
    },
    ...]
  },
  1
  2
  3
  4
  5
  6
  7
  8

• babel存在的一些问题：

  • Babel 在每个文件都插入了辅助代码，使代码体积过大！

    • 解决方案：

    • 安装依赖

    • // 下面安装的两个依赖避免babel重复注入辅助代码，改用引用 runtime的形式
      npm install -D @babel/plugin-transform-runtime
      npm install @babel/runtime
      1
      2
      3

    • 修改配置文件,添加如下代码

    • module.exports = {
        // 禁用 Babel 自动对每个文件的 runtime 注入，改为引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。
        plugins: ['@babel/plugin-transform-runtime']
      }
      
      1
      2
      3
      4
      5

  • babel-loader 很慢！

    • 开启缓存： 'babel-loader?cacheDirectory'
    • 排除不需要检测的目录： exclude: /(node_modules)/, // 设置哪些目录不需要扫描

3. 使用 core-js 解决 babel 无法解决的兼容性问题

• babel 的 preset-env 可以解决一些 es6 语法的兼容性问题（箭头函数、…语法等），但比如 async、promise、Array.includes()等preset-env是处理不了的，所以我们要用到 core-js来处理 es6以及 es6+的 polyfill

• 安装依赖

• npm install core-js
  1

• 使用方式 1: 完全引入

• import 'core-js'
  1

• 自动按需引入，修改 babel 的 preset-env 设置(  不需要再按照方式1 引入 core-js了 )

• module.exports = {
    // 预设
    // @babel/preset-env: 一个智能预设，允许使用最新的javascript语法（比如箭头函数, ...）
    presets: [
      // 预设的配置是需要使用数组实现的，配置对象作为数组的第二个元素出现
      ['@babel/preset-env', {
        useBuiltIns: 'usage', // core-js 按需引入
        corejs: 3 // core-js 版本
      }]
    ],
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11