立博sport官方登录立博sport官方登录

libosport官方登录
立博在线官方网址

ESLint + lint-staged 禁用老项目中的es6

前言

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,就大概看了下,巩固下原来不熟悉的地方,给自己也做个记录。希望能对有需要的同学有所帮助。

欢迎阅读本文章: 孙玉彪

libo在线官方网页

libosport官方登录