如何配置 Babel 以正确处理多个文件夹？

Question

我使用 Babel 已经有一段时间了，它可以使用以下命令将我的 ES Next 代码正确转换为 dist 文件夹：

babel src --out-dir dist --source-maps --copy-files

到目前为止，我的所有 Javascript 代码都在 src 中，但现在我想将我的 React 视图移动到 src 旁边的 views 文件夹中。我将 Babel CLI 调用修改为：

babel src views --out-dir dist --source-maps --copy-files

现在我的问题是，虽然文件编译正确，但没有一个 imports 是。例如在我的文件Navigation.js 我有这个import：

import Permissions from "../src/utils/permissions";

这将被转换成

var _permissions = _interopRequireDefault(require("../src/utils/permissions"));

在 Babel 运行之后。

当我使用多个源目录时，如何配置 Babel 以修复导入？

Answer 1

我不确定 babel 是否可以自己完成此任务。它是一个很好的转译工具，但可以将其视为一个无情的忠实翻译。据我所知，它将转换您的代码，但不会根据您所需的输出位置和关系重新解释您的导入语句。所以你有两个选择：

1. 如果仅使用 babel，请维护源代码中的文件与所需输出之间的关系。例如，如果您希望 /src 和 src/views 中的所有文件在 dist 中的同一级别上结束，那么您可能需要这样的文件夹结构：

/src
  - /src
  - /views

我知道这里的命名有点多余。但是使用babel src/src src/views --out-dir dist --source-maps --copy-files，你所有的文件都将被转译到/dist中的同一级别，并且导入关系都将保持正确。

1. 使用构建工具。 Webpack 是一个更加健壮的工具，它本身经常使用 babel。 Webpack 足够聪明，可以根据您的配置方式在捆绑代码中重写您的导入语句。问题How to create multiple output paths in Webpack config 得到了很好的回答。 Webpack 本身就是一个世界，但如果你知道如何使用它，它的强大足以完成你想要的。

我希望有人会过来告诉我我错了，并且有一些 perfect-for-this-scenario-rewrite-imports-babel-plugin 可以完成这项工作。这是希望。否则我认为你必须重组，或者潜入 webpack。