eslint-CLIEngine

19 3月

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的语法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注