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
  }
}
  • 安装和使用插件（之前的版本使用 loader 处理）
npm install eslint-webpack-plugin eslint --save-dev
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin({
    context: path.join(__dirname, 'src') // 配置eslint检测范围
  })],
  // ...
};
  • 创建.eslintignore文件
  • vscode 的 eslint 插件也会扫描eslint配置文件，但它无法读取我们在webpack.config.js中设置的扫描范围，所以我们需要创建.eslintignore文件
// .eslintignore 文件

dist

2. babel 处理js兼容性

  • 创建babel 配置文件
  • .babelrc
  • .babelrc.js( 推荐 )
  • .babelrc.json
module.exports = {
  // 预设
  // @babel/preset-env: 一个智能预设，允许使用最新的javascript语法（比如箭头函数, ...）
  presets: ['@babel/preset-env'],
}

  • 安装依赖
npm install -D babel-loader @babel/core @babel/preset-env
  • 使用
{
  test: /\.js$/,
  exclude: /(node_modules)/, // 设置哪些目录不需要扫描
  use: [{
    loader: 'babel-loader?cacheDirectory', //开启缓存，可以设置缓存目录
  },
  ...]
},
  • babel存在的一些问题：
  • Babel 在每个文件都插入了辅助代码，使代码体积过大！
  • 解决方案：
  • 安装依赖
// 下面安装的两个依赖避免babel重复注入辅助代码，改用引用 runtime的形式
npm install -D @babel/plugin-transform-runtime
npm install @babel/runtime
  • 修改配置文件,添加如下代码
module.exports = {
  // 禁用 Babel 自动对每个文件的 runtime 注入，改为引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。
  plugins: ['@babel/plugin-transform-runtime']
}

  • 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: 完全引入
import 'core-js'
  • 自动按需引入，修改 babel 的 preset-env 设置(  不需要再按照方式1 引入 core-js了 )
module.exports = {
  // 预设
  // @babel/preset-env: 一个智能预设，允许使用最新的javascript语法（比如箭头函数, ...）
  presets: [
    // 预设的配置是需要使用数组实现的，配置对象作为数组的第二个元素出现
    ['@babel/preset-env', {
      useBuiltIns: 'usage', // core-js 按需引入
      corejs: 3 // core-js 版本
    }]
  ],
}