webpack从入门到原理（基础四）——JS资源处理

i东东
172 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言

这一篇主要写了JS资源的处理,因为 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以就需要做一些兼容性处理。针对 js 兼容性处理，我们使用 Babel 来完成,针对代码格式，我们使用 Eslint 来完成，先完成 Eslint，检测代码格式无误后，再由 Babel 做代码兼容性处理。

Eslint

Eslint配置是用来检测 js 和 jsx 语法的工具，可以配置各项功能,使用Eslint主要就是写Eslint配置文件，里面会写各种 rules 规则来对代码进行检查。

配置文件

配置文件有很多种都是建在项目的根目录下 : .eslintrc、.eslintrc.js、.eslintrc.json区别就在于配置格式不一样。 package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写，ESLint 会查找和自动读取它们，所以上面的配置文件只需要存在一个即可。

具体配置

以.eslintrc.js为例写,更多规则参考Eslint官方文档

module.exports = {
  // 解析选项
  parserOptions: {
    ecmaVersion: 6, // ES 语法版本
    sourceType: "module", // ES 模块化
    ecmaFeatures: { // ES 其他特性
      jsx: true // 如果是 React 项目，就需要开启 jsx 语法
    }
  },
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
};

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

规则可以直接在官方规规则文档中查找，rules是一个个的键值对，直接设置就可以了。

extends 继承

在一个项目中可能需要用到很多的规则,一条一条去配置会很麻烦，那么就可以用extends继承现有的规则去使用。比较常用的规则 : Eslint 官方的规则：eslint:recommended Vue Cli 官方的规则：plugin:vue/essential React Cli 官方的规则：react-app。在使用的时候直接下载规则然后进行配置就可以使用了，如果是官方规则就不需要下载直接使用即可，如果里面的规则有些不需要，可以直接在rules中进行配置，配置的规则会覆盖掉继承的规则(配置的规则优先级高于继承的规则)。

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

Eslint使用

参考webpack官方文档使用 eslint 来查找和修复 JavaScript 代码中的问题。首先，需要安装 eslint-webpack-plugin和Eslint

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

安装完成之后还需要把插件添加到 webpack 配置

// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

配置完成就可以进行配置,在根目录下新建一个.eslintrc.js文件,如下： extends: ["eslint:recommended"]:表示继承了eslint推荐的规则 "no-var": 2:表示不能用var去申明变量

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

到此配置就可以生效了： 打包就会发现因为no-var的原因所以报错:使用let或const代替no-var,当把var换成let或者const，就可以正常打包了。 image.png

eslint语法检查工具

如果我们安装了ESLint语法严查工具的话，就会发现在还没有进行打包的时候就已经标红报错了，这样就会更加有好一些！

image.png

但是这个时候在打开dist目录时会发现dis/static/js/main.js标红报错: image.png

但是打包的文件是不需要进行语法检测的，这个时候就只需要在项目根目录新建一个.eslintignore文件,写上dist,这个时候语法检测就会自动忽略掉dist目录下的文件。

// .eslintignore
dist

Babel

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

配置文件

配置文件有很多种写法都是建在项目根目录： babel.config.js、 babel.config.json、 .babelrc、.babelrc.js、 .babelrc.json，Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可，package.json 中 babel：不需要创建文件，在原有文件基础上写就可以了。

具体配置

babel配置主要是presets预设,就是一组插件用来扩展babel的功能，预设可以加载多个:

  • @babel/preset-env: 智能预设，允许使用最新的 JavaScript(比如将箭头函数编译成普通函数等)
  • @babel/preset-react：用来编译 React jsx 语法的预设
  • @babel/preset-typescript：用来编译 TypeScript 语法的预设
module.exports = {
  // 预设
  presets: [],
};

babel使用

参考官方文档babel是用loader去处理,下载包：

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

方法一

安装完成之后就可以在 webpack 配置对象中，将 babel-loader 添加到 module 列表中：

// webpack.config.js
  {
    test: /\.js$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }

exclude: /(node_modules)/:是在检测时排除node_modules下的文件，因为这些都是安装的插件是已经处理好的文件，如果重复进行监测的话就会导致运行速度变慢。

方法二

也可以将配置文件单独写，这样更方便后续对配置进行修改等操作：

// webpack.config.js
  {
    test: /\.js$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
  }

// 在根目录创建 babel.config.js
module.exports = {
  // 用来编译ES6的语法
  presets: ['@babel/preset-env']
}

在没有进行打包之前可以看到dist/static/js/main.js中有ES6的扩展运算符和箭头函数

image.png 打包之后就会变成普通函数，这样兼容性就会更好！

image.png

小结

以更文促进学，持续不断进步,加油，第一个青春是上帝给的，第二个的青春是靠自己努力的！

avatar
文章
阅读
粉丝