Webpack5 处理 js 资源

js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

• 针对 js 兼容性处理，我们使用 Babel 来完成
• 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

Eslint

Eslint：可组装的 JavaScript 和 JSX 检查工具。这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能。我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

1. Eslint 配置文件

配置文件由很多种写法：区别在于配置格式不一样

• .eslintrc.*：新建文件，位于项目根目录
• .eslintrc
• .eslintrc.js
• .eslintrc.json
• package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置

我们以 .eslintrc.js 配置文件为例：

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

1. parserOptions 解析选项

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}

2. rules 具体规则

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

更多规则详见： List of available rules - ESLint中文文档 (bootcss.com) 

3. extends 继承

开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

Eslint 官方的规则：https://eslint.bootcss.com/docs/rules/

Vue Cli官方的规则：  vue/cli-plugin-eslint

React官方的规则：eslint-config-react-app

// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],   //规则需要下载
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

3. 在 Webpack 中使用

1.下载包： npm install eslint-webpack-plugin eslint --save-dev

 2. 配置文件 webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  //插件
  plugins: [
    // plugins的配置
    new ESLintPlugin({
    // 检测哪些文件
    context: path.resolve(__dirname,"src")  //__dirname表示绝对路径
    })
  ],
};

 此时打包发现报错：

 ERROR in [eslint] No ESLint configuration found in D:\Date\Webpack\day_01\src.

 解决方法：创建 .eslintrc.is 文件

 3. 创建 .eslintrc.is 文件

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,   //es 6
    sourceType: "module",  //es module
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量    // 2 为 error
  },
};

小提示：可以安装 ESLint插件

打包发现未报错，但是打包好的 main.js 文件却报错，这时只需要创建 .eslintignore 忽略文件，把需要忽略的目录放在这个文件里

Babel

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

1. 配置文件

配置文件由很多种写法：

• babel.config.*：新建文件，位于项目根目录
• babel.config.js
• babel.config.json
• .babelrc.*
• .babelrc
• .babelrc.js
• .babelrc.json
• package.json 中 babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

Babel 官方的文档：https://www.babeljs.cn/docs/

2. 具体配置

我们以 babel.config.js 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

presets 预设：简单理解，就是一组 Babel 插件, 扩展 Babel 功能

• @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
• @babel/preset-react：一个用来编译 React jsx 语法的预设
• @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

3. 在 Webpack 中使用 Babel

 1.下载 ：npm install -D babel-loader @babel/core @babel/preset-env 

2. 定义 Babel 配置文件 webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,  //排除 node_modules 中的js文件 (这些文件不处理)
     // use: {  // 这里use 可以不写
        loader: 'babel-loader',
        // options: {    //一般在 babel.config.js 文件写,方便修改
        //      presets: ['@babel/preset-env'],
        //      plugins: ['@babel/plugin-proposal-object-rest-spread']
        // }
      //}
    }
  ]
}

3.  创建 babel.config.js