从 Git 子模块仓库导入 React 组件

Question

我有一个使用React开发的父代码库，其中包含一个子代码库(也是用React开发的):

项目文件夹结构如下：

parent 
  /.git
  /nodemodule
  /src
  /subModules/childProject
     /.git
     /src
       /js
         /x.jsx //  i want this file from parent project
     /...
  /...

我想从父级项目中访问和使用x.jsx组件。我在父项目中通过以下方式导入它：

import X from '../subModules/childProject/src/js/x.jsx'

但是它给了我一个“unexpected token（意外的标记）”！

   7 |   return (
>  8 |     <article className="center">
     |     ^
   9 |       this is test global component with in child Project
  10 |     </article>
  11 |   )

看起来它无法转换，因为我只是用旧的JavaScript方式编写了一个测试函数，例如：

export default function test(x) {
  return x * 2
}

它成功导入，没有报错，并且可以工作，但是当我像下面这样用箭头函数写函数时:

export default function test(x) => x * 2

它不能工作。看起来这只是模块转译的运行时错误，我该如何将子模块中的React组件转译并导入到父存储库中？

- amdev

---

我们需要更多信息，您是否使用了 create-react-app？您使用的是哪个版本？看起来您只需要一个 .babelrc 文件。 - ajorquera

Answer 1

问题是Babel不知道项目根目录中有一个子模块项目，只需将我的.babelrc文件更改为babel.config.js并通过babelrcRoots进行配置，我就能够解决这个问题：

现在我的babel.config.js文件看起来像这样：

module.exports = {
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ],
  "babelrcRoots": [ "./", "./subModules/someFolder" ]
}

现在我可以从子仓库中导入React组件和JS模块到我的主项目中，并且它能正常工作。

- amdev

---

我尝试将子模块文件夹包含到我的craco.config的babelrcroots中。虽然其他语法（如空值合并表达式）可以转换，但JSX没有被转换。 - droid001