如今前端工程化,自动化已经成为了新趋势,如果我们要重新开始做一个项目,你会花费多久的时间在前期环境的搭建上呢?在我们前端的的积累中,我们需要将这些技术沉淀下来,便于我们开始一个新的项目,而不必花费过多的经历在环境搭建中。
这次我做的是一个集成了 eslint、stylelint、git hook 的前端代码检查工具。项目已经开源在github上,名字叫做oishi,一开始想起名叫husky(哈士奇),后来这个名字被占了(无奈脸)。
先来理一下我们这个工具需要做什么事情
- 需要让他初始化eslint,stylelint的配置文件
- 安装好我们需要的依赖
- 挂载git钩子,在代码提交时进行进行eslint检查
有了目标我们开始实现我们这样的一个工具:
1.准备工作
- 这次我们采用commander来开发我们的命令行,
- 利用chalk来美化我们控制台的输出,
- 利用shelljs来执行我们文件中的一些脚本
在本地调试时需要在package.json中配置bin选项,然后开发好后npm link 发布到本地的全局,就可以开始使用自己的命令行了
2.进入正题
对于之前提到的第一点,我们首先要有自己的一个配置,在初始化的时候将它拉下来,我们在这里将自己的配置扔到了github的仓库中,可以参考一下我的项目目录配置文件,从github上拉下来后利用node原生的fs模块读写配置文件。
我们所需要的依赖项目也都会记录在配置文件中,读取文件后与当前目录下的package.json对比一下,利用shell执行安装缺少的依赖即可
挂载git钩子,有两种方式,第一种,我们可以自己写一个pre-commit,也可以安装pre-commit npm包,我们这里采用了第一种方式,也是因为shell脚本比较通用,到此为止,我们在本地已经开发完成了一个命令行,在我们将我们写的pre-commit,移入到git hooks下面的时候,记得要加权限,
chmod x pre-commit
pre-commit如何编写,相信网上有很多了,这里我给一个大概的实现思路
首先是获取到你要eslint的代码,
JS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(.js?)$")
CSS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(.p?css)$")
然后调用自己的eslint命令,
oishi lintjs --exitcode $JS_FILES
最后判断返回值,
有一个小坑的地方在于你的入口文件处,你要声明一下自己的node路径
#!/usr/bin/env node
3.结尾工作
我们在npm上注册一个自己的账号,然后切换到项目目录下,
代码语言:javascript复制npm login
npm publish
对于一些具体的技术细节可以参见我项目中的源码,也可以在下方评论留言