ESLint可以通过Node API的方式直接使用。项目开发中一直用es6语法,为了兼容万恶的旧浏览器,上线前都会用babel将es6转成es5。但还是出了几个case,所以一发狠,在release发布前,写一个webpack插件来检测构建完成的文件中是否含有es6的代码,如果有,就直接中止上线。使用的就是ESLint的CLIEngine
- Linter
- CLIEngine
Linter
Linter实际解析JavaScript代码(它并不执行和文件相关的操作,只是单纯地解析代码)。
最常用的API是verify(code, config[, options]):参数code是string或SourceCode,
const Linter = require("eslint").Linter; const linter = new Linter(); const messages1 = linter.verify("var foo", { rules: { semi: 2 // 2 - 开启规则,级别为 error,触发时会导致程序退出 } }); console.log(messages1); // [ // { // ruleId: 'semi', // severity: 2, // message: 'Missing semicolon.', // line: 1, // column: 8, // nodeType: 'VariableDeclaration', // fix: { range: [Array], text: ';' } // } // ]
verifyAndFix方法和上面verify很像,还能给出推荐的修正代码:
const messages2 = linter.verifyAndFix("var foo", { rules: { semi: 2 } }); console.log(messages2); // { fixed: true, messages: [], output: 'var foo;' }
可以用getRules()获取当前Linter的所有规则。Linter还允许你自定义规则:defineRule(),defineRules(),甚至自定义解释器:defineParser()。总之能暴露的都暴露出来,你们自己去玩,详见官网。
CLIEngine
CLIEngine是最重要的API,在底层运行ESLint命令。会读取配置信息,但不会输出任何结果,你可以自己处理输出。支持的API比较多,一个个翻译没意义,以项目中用到的executeOnText举例,其他都大同小异:
const glob = require("glob-promise"); const CLIEngine = require("eslint").CLIEngine; const cli = new CLIEngine({ useEslintrc: false, parserOptions: { ecmaVersion: 5 } }); const checkFiles = async() => { const errorMessages = []; let errorMsg = ''; const files = await glob('src/tmp/*.js', { nodir: true }); try { const results = cli.executeOnFiles(files).results; results.forEach(result => { if (result.errorCount > 0) { errorMsg += `${result.filePath}:\n`; errorMsg += result.messages.map(msg => { const { message, line, column } = msg; return `${message}, line: ${line}, column: ${column}\n`; }).join('\n'); } }); } catch (e) { errorMsg = `es-5-check error: ${e.message}`; console.error(errorMsg); } if (errorMsg !== '') { errorMessages.push(errorMsg); } if (errorMessages.length > 0) { console.error(`es-5-check failed: \n${errorMessages.join('\n')} \n`); process.exit(1); } else { console.info('es-5-check ok'); } };
上面都是自解释代码,主要分三个步骤:
1.初始化CLIEngine时,在parserOptions配置属性里设置es5版本。
2.遍历文件夹里的js文件(项目中是release/src目录),将文件内容读取出来。
3.用cli.executeOnText方法,检查文件内容。如果里面混有非es5的代码,返回值里会有error信息,例如errorCount,将这些error信息输出即可。
最后这个检查方法,作为webpack自定义插件的一个回调,就能实现上线前自动检测是否代码中混有非es5的语法。