webpack5-基础入门-04-处理JS资源 Eslint Babel

webpack只能编译js中ES 模块化语法不能编译 其他语法

针对js兼容性处理，使用babel来完成

针对代码格式，使用Eslint 来完成

 Eslint  可组装的javaScript和JSX检查工具

使用Eslint 写配置文件 里面写各种rules规则  运行做代码检查

1.配置文件写法

.eslintrc.*：新建文件,位于项目根目录  .eslintrc  eslintrc.js  eslintrc.json 区别在于配置格式不一样

2.package.json 中配置 eslintConfig:不需要创建文件，在原有文件基础上写

Eslint 会查找自动读取它们 以上配置文件只需要存在一种

以 `.eslintrc.js` 配置文件为例：

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

1. parserOptions 解析选项

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

2. rules 具体规则

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

```js
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 除了少数情况下不会有警告
  ],
}
```

3. extends 继承

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

现有以下较为有名的规则：

- [Eslint 官方的规则](https://eslint.bootcss.com/docs/rules/)：`eslint:recommended`
- [Vue Cli 官方的规则](https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint)：`plugin:vue/essential`
- [React Cli 官方的规则](https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app)：`react-app`

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

使用Eslint

安装：

npm install eslint --save-dev

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

设置 .eslintignore  不检查dist文件

定义根目录下 .eslintrc.js    

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

webpack.config.js 配置

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

  plugins: [
     + new ESLintPlugin({
       +   //检测哪些文件
         + context:path.resolve(__dirname,"src"),
      +}),
  ],

2.Babel用法

配置文件由很多种写法：

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

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

新建 babel.config.js

1. presets 预设

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

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

安装：npm i babel-loader @babel/core @babel/preset-env -D

            npm install -D babel-loader @babel/core @babel/preset-env webpack

  {
			      test: /\.m?js$/,
			      exclude: /(node_modules|bower_components)/, ///排除node包中的js文件不处理
			      use: {
			        loader: 'babel-loader',
			        options: {
			          presets: ['@babel/preset-env']
			        }
			      }
			    }

也可以在外面配置 新建 babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};