webpack5处理js资源

Posted 2022-12-16 天界程序员

  在webpack5的官方文档中已经说明，webpack是会自动处理javascript和JSON资源的，这里为什么还要我们单独处理呢？

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

其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

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

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

---

ESlint

详情可参见：ESlint中文文档 是一款可组装的JavaScript和JSX检查工具。

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

1.配置文件

• 文件命名：.eslintrc、.eslintrc.js、.eslintrc.json 区别在于配置的格式不同，功能相同。

• 文件位置：位于相同根目录。

• package.json中的eslintConfig: 不需要创建文件，在原有文件基础上写ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可。

2.具体配置

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

module.exports = 
  // 解析选项
  parserOptions: ,
  // 具体检查规则
  rules: ,
  // 继承其他规则
  extends: [],
  // ...
;

其他规则详见

• parserOptions 解析选项

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

• rules 具体规则

  1. "off" 或 0 - 关闭规则

  2. "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

  3. "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 除了少数情况下不会有警告
  ],

具体详情参见：ESlint规则文档

• extends 继承

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

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

1. Eslint 官方的规则 : eslint:recommended

2. Vue Cli 官方规则 ：plugin:vue/essential

3. React Cli 官方规则 ：react-app

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

---

3. 在Webpack中的使用

• 需要安装的依赖包

npm i eslint-webpack-plugin eslint -D

• 定义ESlint 配置文件

文件名：.eslinrc.js

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

• 修改js文件代码

文件名：main.js

import add from "./js/add";

var result1 = add(2 , 1); // 计算1+2，测试代码
console.log(result1);

• 在webpack配置中使用插件

文件名：webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); 
// ...
plugins: [
    new ESLintWebpackPlugin(
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    ),
  ],

• 配置完成后可以启动webpack,在控制台查看效果

npx webpack

4. VSCode Eslint 插件

  如果你使用的开发工具是VSCode的话，可以安装ESlint插件，即可不用编译就能看到错误，可以提前解决。

但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

文件名：.eslintignore

文件位置：项目根目录

# 忽略dist目录下所有文件
dist

---

Babel

官方文档：

• 中文官方文档
• 英文官方文档

Babel 是一个 JavaScript 编译器，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性 （通过引入第三方 polyfill 模块，例如 core-js）
• 源码转换（codemods）
• 更多参考资料！

1. 配置文件

• 文件命名：babel.config.js、babel.config.json、.babelrc、.babelrc.js、.babelrc.json,写法不一，功能一致

• 文件位置：项目根目录

• package.json中babel: 不需要创建文件，在原有文件基础上写Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置

文件名：babel.config.js

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

• presets预设

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

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

3. 在webpack的配置中启用

• 安装所需要的依赖包

npm i babel-loader @babel/core @babel/preset-env -D

• 定义 Babel 配置文件

文件名：babel.config.js

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

• webpack配置

文件名：webpack.config.js

module: 
    rules: [
 	// ...
      
        test: /\\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      ,
    ],
  ,

• 运行webpack

npx webpack

打开打包后的 dist/static/js/main.js 文件查看，会发现箭头函数等 ES6 语法已经转换了。