webpack配置篇(三十二):使用ESLint规范构建脚本

简介: webpack配置篇(三十二):使用ESLint规范构建脚本

说明

玩转webpack学习笔记


安装依赖

使用 eslint-config-airbnb-base 构建

npm i eslint eslint-config-airbnb-base babel-eslint -D


编写配置:

20210506193804174.png

module.exports = {
  "parser": "babel-eslint",
  "extends": "airbnb-base",
  "env": {
    "browser": true,
    "node": true
  }
};



运行 eslint 进行检查

执行 eslint 命令检查 lib 包的代码规范:

./node_modules/.bin/eslint lib/


发现报错:

202105061935122.png

我们先进入目录 builder-webpack 文件夹,然后在执行命令:


20210506193948135.png


处理报错

运行检测命令时,我们会发现有一些报错:

比如:空格问题,可以使用 eslint --fix 可以自动处理空格,我们在下面自己添加 eslint 执行脚本即可:

npm run eslint


20210506194400844.png


比如:依赖问题


20210506195110711.png


需要把 "webpack-merge": "^4.2.2" 放到下面的 dependencies 里面去


20210506195136326.png



调整完,然后在重新安装一下依赖,在运行一下检测命令:发现已经没有报错提示

20210507101609983.png


接下来我们看看 Missing trailing comma 报错,说 webpack.base.js 文件里对应的行数缺少尾随逗号

20210507140319730.png


在对应的问题行添加逗号:


20210507141559317.png


运行检测命令:发现只有一个报错了

20210507141534412.png


最后看一下最后一个报错:找到对应行,通过下的提示,这个问题可以通过 --fix 来修复


2021050714185182.png


我们来试一下:发现真的解决了


20210507142126446.png



代码被修改成了:


20210507142231783.png



到此,问题解决完毕。









目录
相关文章
|
11天前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
|
12天前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
|
13天前
|
缓存 JavaScript 前端开发
webpack学习笔记--基本配置
webpack学习笔记--基本配置
|
17天前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
2月前
|
存储 前端开发 文件存储
webpack成长指北第5章---webpack的基础配置
webpack成长指北第5章---webpack的基础配置
27 0
|
3月前
|
缓存 前端开发 JavaScript
|
4月前
|
人工智能 移动开发 前端开发
【利用AI让知识体系化】Webpack 相关配置技巧(三)
【利用AI让知识体系化】Webpack 相关配置技巧
|
4月前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(二)
【利用AI让知识体系化】Webpack 相关配置技巧
|
2月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
40 1
|
2月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
44 0