![3c0447358a2d2d4c90fd40bed04068c9.png](https://i-blog.csdnimg.cn/blog_migrate/64920ddb742dec866e4fcd85368d5dd7.jpeg)
前言
代码规范对于个人开发和团队开发来说都是非常重要的一个环节,在开发之前团队就应该定义完项目中开发时需要遵守的规范。对于前端开发来说eslint 是专门来解决团队开发中每个人随心所欲的编写代码产生的问题。也强制我们必须遵守那些规则。
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
简单的说,eslint就是一个能够帮我们检查我们代码的格式、语法,从而来规范前端开发团队在开发流程中的代码。
正文
Eslint
- 安装 eslint
npm i -D eslint
2.初始化eslint 配置文件
npx eslint --init # 如果不知道 npx 是什么可以看第一章
# 之后, 根据提示选择相应的选项
在使用 eslint --init
后,会出现很多用户配置项,具体可以参考:eslint cli 部分的源码。
经过一系列一问一答的环节后,你会发现在你文件夹的根目录生成了一个 .eslintrc.js
文件。
![04e676e655cd0a7a51ff496dd8f5f9cb.png](https://i-blog.csdnimg.cn/blog_migrate/c96467f48c2883ceae2452ace8b47f2d.jpeg)
配置的话这里就不写了,可以查看eslint 配置
mode
在webpack的配置中,其他配置都可以没有!但是mode是必备的,如果不加mode,官方虽然会打包,但同时也会给你一个警告:
![cd0ba772bbbbcf3d914bafbc95899c0c.png](https://i-blog.csdnimg.cn/blog_migrate/726f604086769329e90f735d53c9b878.jpeg)
mode 一共有三个参数 production
, development
, none
。当不写mode 的时候 也就是 none的情况,系统就会给一个默认的production
模式。
development:开发模式
production: 生产模式
如何在打包的时候区分这两个模式,下一节再说,这节说一下区分这两个模式的必要性devtool
此选项控制是否生成,以及如何生成 source map。
配置如下:
devtool:'',
![ecceb574c42dce9510fd61dad652957c.png](https://i-blog.csdnimg.cn/blog_migrate/f4535e6bce778987332e8f0d92868730.jpeg)
这个配置时可以对打包后的代码进行映射,找到出错的地方。根据上图可以看出配置devtool 会对打包的速度有影响。
当我们运行yarn run dev
的时候,执行的命令是webpack-dev-serve
,这个命令也对我们源代码进行打包,只不过没有生产dist,存在于内存中,属于开发环境,这时候配置devtool,在开发的过程中很容易找到出错的地方。但是在生产环境下,这个功能就显得有些多余,而且会影响到打包速度。所以在打包的时候要区分mode
, 根据不同的 mode
进行配置打包。
resolve
这些选项能设置模块如何被解析。webpack 提供合理的默认值,但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明,请查看模块解析。
这里只说三个参数
# 配置
resolve:{
# 自动解析确定的扩展,能够使用户在引入模块时不带扩展
extensions: [".js", ".jsx"]
# 解析目录时要使用的文件名。
mainFiles:['index']
# 创建别名以更容易地导入或要求某些模块
alisa:{
# 在项目中使用 @ 表示 src 路径
'@':path.resolve(__dirname, 'src')
}
}
# 根据上面的配置,下面表示 从 src 路径下 component/temp 的目录里面引入 index.js 如果没有 就查找 index.jsx 如果都没有就报错。
import TempComponent from '@/component/temp'
作者:编程琐事
链接: https:// juejin.im/post/68874802 79155769351
来源:掘金