我有一个用 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
这是行不通的。看起来这只是转译模块的运行时错误,如何将子子模块中的反应组件转译并导入到父存储库中?
问题是 Babel 不知道项目根目录下有一个子模块项目,只需更改我的.babelrc
文件至babel.config.js
并通过配置它babelrcRoots
我将能够solve问题:
Now my 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 模块,并且它可以正常工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)