javascript - babel 子模块意外 token 导入

Question

我找不到我的问题的解决方案，这里是:
我使用 babel 在我的 api 上将我的代码从 es6 转换为 es5。
在我添加一个包含 API 和我的移动应用程序 (React Native) 之间的共享函数的子模块之前，这一直很好用。
现在，当我从这个公共(public)子模块导入一些东西时，出现错误“Unexpected token 'import'”，所以我的子模块没有被转译。
在移动应用程序上注意，我对这个子模块没有问题。

这是我的结构:
|来源
| -- 通用/(子模块)
| -- -- graphql/
| -- -- -- user.js(必填，es6编写)
| -- -- 包.json
| -- 数据/
| -- 助手/
| -- 索引.js

我的 babelrc 看起来像:

{
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": ["@babel/preset-env"]
}

注意我的子模块没有任何.babelrc

这里是 babel error

有人遇到过这个问题吗？谢谢 :)

编辑:如果我删除子模块 package.json，它会工作

编辑 2:将我的 .babelrc 重命名为 babel.config.js 成功了 ✅

Node v8.10.0
巴别塔 7.0.0

Answer 1

这是预期的行为。如果你看https://babeljs.io/docs/en/config-files ，关键部分是

The "filename" being compiled must be inside of "babelrcRoots" packages, or else searching will be skipped entirely.

src/common/graphql/user.js在 src/common 里面包，但你的根包是根，这是一个不同的包。

如果您想使用内部 .babelrc您需要通过创建 babel.config.js 来选择加入根目录下的文件

module.exports = {
  babelrcRoots: [__dirname, __dirname + "/common"],
};

让 Babel 知道这两个包都应该被考虑 .babelrc可用的包。