1

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

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

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

需要让他初始化eslint,stylelint的配置文件
安装好我们需要的依赖
挂载git钩子,在代码提交时进行进行eslint检查
有了目标我们开始实现我们这样的一个工具:

准备工作
这次我们采用commander来开发我们的命令行,

利用chalk来美化我们控制台的输出,

利用shelljs来执行我们文件中的一些脚本

在本地调试时需要在package.json中配置bin选项,然后开发好后npm link 发布到本地的全局,就可以开始使用自己的命令行了

2.进入正题

对于之前提到的第一点,我们首先要有自己的一个配置,在初始化的时候将它拉下来,我们在这里将自己的配置扔到了github的仓库中,可以参考一下我的项目目录配置文件,从github上拉下来后利用node原生的fs模块读写配置文件。

我们所需要的依赖项目也都会记录在配置文件中,读取文件后与当前目录下的package.json对比一下,利用shell执行安装缺少的依赖即可

挂载git钩子,有两种方式,第一种,我们可以自己写一个pre-commit,也可以安装pre-commit npm包,我们这里采用了第一种方式,也是因为shell脚本比较通用,到此为止,我们在本地已经开发完成了一个命令行

3.结尾工作

我们在npm上注册一个自己的账号,然后切换到项目目录下,

npm login

npm publish

这篇文章中没有涉及过多的技术细节,只说了大体上的一些实现思路,具体的代码有兴趣的朋友可以clone下我的项目,具体一些技术上的实现细节请在我的github中留言

觉得有帮助的可以区点一下star


张春林2014
75 声望3 粉丝