Question

我使用create-react-app创建了一个空的应用程序，弹出，然后添加了一个重写我的代码的Babel插件。最小的repro是一个插件：

import React from 'react';
App();

并将其转换为：

import React from 'react';
export default () => <div />;

您可以使用astexplorer测试的代码是：

module.exports = function testPlugin(babel) {
  return {
    visitor: {
      CallExpression(path) {
        var t = babel.types;
        var op = t.jSXOpeningElement(t.jSXIdentifier("div"), [], true);
        var el = t.jSXElement(op, null, []);
        var arrowFunctionExpression = t.arrowFunctionExpression([], el);
        path.parentPath.replaceWith(t.exportDefaultDeclaration(arrowFunctionExpression));
      }
    }
  };
};

除了弹出的create-react-app之外，它几乎适用于所有样板（当插件被添加到Babel配置的插件部分时）。有了它我得到了：

./src/App.js
Line 2:  'App' is not defined  no-undef

该插件肯定在运行，因为我可以在console.log中输入错误。

发生了什么？

Answer 1

发生了什么？

该错误来自ESLint，ESLint在原始源代码上运行，因为它是代码格式和验证工具。它无法知道你已经编写了一个Babel插件来在构建时执行转换。它只知道您的代码中有一个名为App的变量，并未在任何地方声明。

也许您可以考虑告诉ESLint App文件中.eslintrc是全局的，以便no-undef规则将变量视为已定义。

使用Babel插件在弹出create-react-app后重写代码

1 个答案: