有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

在 Webpack5新特性 集成(ESLint 的方法)

开发者资讯 炮渣日记 1个月前 (11-07) 27次浏览 已收录 0个评论 扫描二维码

ESLint 是前端 JS 代码检查常用的工具,使用 ESLint 可以使不同的开发人员遵循统一的开发规范、有统一的代码风格。关于 ESLint 的详细介绍,参考《ESLint是什么》一文。本文详细介绍如何在 webpack 5 中集成 ESLint。

1 安装依赖

在 webpack 4 中,ESLint 是通过 loader 的方式集成到 webpack 中的。在 webpack 5 中,是通过 plugins(插件)的形式进行集成。插件名称为 eslint-webpack-plugin。该插件又依赖 eslint 包,故需要安装两个开发依赖包:

yarn add eslint eslint-webpack-plugin -D

2 添加配置文件

在项目的根路径下添加 ESLint 的配置文件:.eslintrc.js:

module.exports = {
  env: {
    node: true,
    browser: true
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module"
  },
  rules: {
    'no-var': 'error',
    'no-console': 'error'
  }
}

3 修改 webpack 配置

修改 webpack.config.js,首先在文件顶部引入插件:

const ESLintWebpackPlugin = require('eslint-webpack-plugin')

Webpack5 插件是通过构造函数方式提供的,引入该插件后,得到的是一个构造函数,通过 new来创建对象。插件配置在webpack 配置对象的 plugins节点下,该节点是一个数组,数组每个元素都是一个插件。配置如下:

...
const ESLintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
  ...
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, 'src')
    })
  ],
  ...
}

4 测试运行

执行之前配置的 webpack 编译打包命令:yarn build。

此时会看到报错信息,因为 ESLInt 检查没有通过:

ERROR in 
xxxxxxx/Webpack_Learning/src/main.js
  12:1  error  Unexpected console statement  no-console
  15:1  error  Unexpected console statement  no-console

这是在main.js中有 console.log语句造成的。

修改 ESLint 的配置文件 .eslintrc.js中的规则配置,将 no-console关闭:

'no-console': 'off'

重新执行打包命令,成功。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址