代码之家 › 专栏 › 技术社区 › Adam Arold

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

babeljs npm javascript

Adam Arold · 技术社区 · 4 年前

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

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

到目前为止,我所有的Javascript代码都在里面 src ,但现在我想将React视图移到 views 旁边的文件夹 src公司 . 我将Babel CLI调用修改为:

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

import 是的。例如在我的文件中 Navigation.js 我有这个 :

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

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

在巴贝尔跑完之后。

当我使用多个源目录时,如何配置Babel来修复导入?

0 回复 | 直到 4 年前

Seth Lutske 4 年前

我不确定巴贝尔自己能做到这一点。这是一个伟大的工具,但认为它是一个无情的忠实翻译。据我所知,它将透明化您的代码,但不会根据您所需的输出位置和关系重新插入导入语句。所以你有两个选择:

如果只使用babel,请维护源代码中的文件与所需输出之间的关系。例如,如果您希望 /src src/views 最终在同一水平上 dist ,那么您可能需要这样的文件夹结构:

/src
  - /src
  - /views

babel src/src src/views --out-dir dist --source-maps --copy-files ,所有文件将在中传输到同一级别 /dist ,导入关系将保持正确。

How to create multiple output paths in Webpack config 答案很好。Webpack本身就是一个世界,但是如果你知道如何使用它的话,它足够强大来完成你想要的。

我希望有人会来告诉我我错了,还有一些 perfect-for-this-scenario-rewrite-imports-babel-plugin 那就行了。希望在这里。否则,我认为你必须重组,或潜入网页包。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前