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

Question

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

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

What's going on?

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

也许您可以考虑在 .eslintrc 文件中告诉 ESLint App 是一个全局变量，这样 no-undef 规则将按定义处理变量。

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

Use Babel plugin that rewrites code after ejecting create-react-app

reactjs

babeljs

create-react-app