用commander做一个自己的eslint脚手架

2019-11-20 11:30:44 浏览数 (1)

如今前端工程化,自动化已经成为了新趋势,如果我们要重新开始做一个项目,你会花费多久的时间在前期环境的搭建上呢?在我们前端的的积累中,我们需要将这些技术沉淀下来,便于我们开始一个新的项目,而不必花费过多的经历在环境搭建中。

这次我做的是一个集成了 eslint、stylelint、git hook 的前端代码检查工具。项目已经开源在github上,名字叫做oishi,一开始想起名叫husky(哈士奇),后来这个名字被占了(无奈脸)。

先来理一下我们这个工具需要做什么事情

  1. 需要让他初始化eslint,stylelint的配置文件
  2. 安装好我们需要的依赖
  3. 挂载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的代码,

代码语言:javascript复制
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

对于一些具体的技术细节可以参见我项目中的源码,也可以在下方评论留言

0 人点赞