前言
ESLint作为插件化的javascript代码检测工具,为我们的平时的开发保驾护航,好处就不多说了详情查看官网。
问题
有这么一个五年前开发的老项目,机缘巧合到了我们这边来维护。
项目是zepto撸起来的,单个文件巨大,只有gulp+公司内部古老的打包工具做了下简单的打包。
但是问题很严重的是,现在es6写习惯了,在老项目时总会有些地方会忽略掉直接用了es6的语法。
这种未经babel转译的代码,然而在当前的现状是大部分浏览器是可以运行的,
只有以蓝绿厂为代表的部分国产手机未支持。测试的时候没有进行全机型的覆盖。导致上线后出问题。在这样的背景下进行了讨论,怎么处理这种老项目。
解决方案
解决其实也很简单,无外乎下面三种
项目迁移
时间充足,迭代频繁的情况下,首选迁移,不然zepto写的文件太大太难维护了。基于现状就pass调这条了。
babel
既然是未转移的存在问题,转就完了。
语法检查
在提交之前,检测es6语法,确保不存在之后再允许提交。
权衡之下,选择了语法检查,顺带复习了下eslint的用法。
安装
//可以全局安装
npm i -g eslint
//或者项目本地安装
npm i -D eslint
安装之后,进行初始化(当然可以复用已有的.eslintrc.js):
eslint --init
//非全局安装
./node_modules/.bin/eslint --init
//选择初始化类型 这里就看具体用途了
How would you like to configure ESLint? (Use arrow keys)
Use a popular style guide //已有的流行规范,大家比较推崇的几种
❯ Answer questions about your style // 回答问题来定制
Inspect your JavaScript file(s) // 检查已有js文件来生成
这里我直接选择了3,以为会比较友好的直接生成。
后面依次如下:
Which file(s), path(s), or glob(s) should be examined? ./js //待检测的目录
? What format do you want your config file to be in? JavaScript //配置文件即eslintrc.js的格式,当然是js喽
? Which version of ECMAScript do you use? ES5 //当前使用的ES5
? Where will your code run? Browser //浏览器
? Do you use CommonJS? Yes //CommonJS规范
? Do you use JSX? No //是否用了jsx,显然否
结束之后,生成了我们的配置文件:
//太长,只关注我们关心的部分吧
//环境部分就是自己选择的
"env": {
"browser": true,
"commonjs": true
},
// 扩展配置 eslint:recommended 是核心规则
"extends": "eslint:recommended",
// 支持的ECMAScript 规范,默认也是5
"parserOptions": {
"ecmaVersion": 5
},
// 检查规则,这里不详细表述
"rules": {
// ***
}
配置文件生成完成,那么直接干吧。直接执行看看:
// 检查 文件夹下面的文件
./node_modules/.bin/eslint ./js
然后报了1020个错误。。。毕竟是老项目,符合规范也不现实。但是我们的目的好像不像这么大费周章,只想禁用es6罢了。eslint提供了这个选项:直接false掉好了。rules其实我们不需要,因为是老项目,也不想去做这个限制。所以配置文件被我改成了这样。
"env": {
"es6":false
},
"parserOptions": {
"ecmaVersion": 5
},
"rules": {
}
这样跑起来看还行,只把文件中的es6部分找出来了
但是这样又有个问题,这个庞大的老项目有文件数目太多。每次都要去检查js文件夹下的所有文件是有点浪费的。毕竟我们有这个这样一个前提,这次未改动的认为是符合要求的(毕竟有问题也早被修复了),应该只关注这次改动部分。这样想的人多了,就有大牛造出下面的工具了。
lint-staged
在commit之前的检测会更有意义一些,这样错误代码就不会提交到仓库。去检测所有文件很慢且有的结果是无关紧要的,你更改关心的是本次改动的内容。这就是lint-staged的用处。
安装及使用:
//切记lint-staged 和 husky要全部安装
npm install --D lint-staged husky
husky 可以阻止坏的commit, push and more。方便我们操作git hooks。
可以这样使用:
{
//自己手动hook
"scripts": {
"precommit": "npm test"
},
//使用husky
"husky": {
"hooks": {
"pre-commit": "npm test"
}
}
}
这里就提一下不要忘记安装这个工具,不然你会发现lint-staged配置完成之后没有起作用(我不想说我是怎么知道的。。。),更多请移步github主页
用法也很简单,在我们的package中增加下配置就好
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
这样,就是只检测本次commit中的js文件了。
那么结合lint-staged,我们可以配下我们的package.json
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
结束
到这里,老项目禁止es6就完成了。简单测试下,覆盖还可以,起码常用的方法可以检测到。正好用到eslint+lint-staged,就大概看了下,巩固下原来不熟悉的地方,给自己也做个记录。希望能对有需要的同学有所帮助。