从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组件转换并导入到父存储库中？

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模块，并且它可以正常工作。