为了确保我们的 ESLint 规则只会对调用了 require 对象的 ensure 方法进行操作,我们需要更加精确地检查 AST(抽象语法树)中的节点。我们可以通过增加检查条件来确保仅针对 require.ensure 方法进行修复,而不是其他可能的 ensure 方法调用。

以下是更新后的自定义 ESLint 规则,包含了检查确保调用者是 require 的代码:

更新后的 ESLint 规则代码

// 文件路径:eslint-rules/no-require-ensure.js
module.exports = {
    meta: {
        type: "problem",
        docs: {
            description: "replace require.ensure with dynamic import",
            category: "ECMAScript 6",
            recommended: false
        },
        fixable: "code",  // 表示该规则支持自动修复
        schema: []
    },

    create: function(context) {
        return {
            CallExpression(node) {
                // 检查调用者是否是 require,并且方法名是 ensure
                if (node.callee &&
                    node.callee.object &&
                    node.callee.object.name === 'require' &&
                    node.callee.property &&
                    node.callee.property.name === 'ensure') {
                    const [ , callback, chunkNameNode] = node.arguments;
                    if (callback && callback.type === 'FunctionExpression' && chunkNameNode && chunkNameNode.type === 'Literal') {
                        const chunkName = chunkNameNode.value;
                        const sourceCode = context.getSourceCode();
                        const requireCall = callback.body.body[0].expression.arguments[0];
                        const pathLiteral = sourceCode.getText(requireCall);

                        context.report({
                            node,
                            message: 'Use dynamic import() instead of require.ensure()',
                            fix: fixer => {
                                const newCode = `() => import(/* webpackChunkName: "${chunkName}" */ ${pathLiteral})`;
                                return fixer.replaceText(node, newCode);
                            }
                        });
                    }
                }
            }
        };
    }
};

解释

在这个更新的规则中,我们增加了对 callee.object.name 的检查。我们检查调用表达式 (CallExpression) 的 callee 属性是否具有 object 属性,这个 objectname 应该是 require。只有当这些条件都满足时,我们才会认为它是一个 require.ensure 的调用,并执行修复操作。

运行 ESLint

一旦定义了规则并在 ESLint 配置中启用,你可以通过以下命令来运行 ESLint 并应用修复:

npx eslint src/ --fix

这种方法确保了只有当确实是 require.ensure 方法被调用时,才会进行替换,从而避免误修改其他类似命名的方法调用。这样可以大大减少因误修改导致的潜在问题。

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3