javascript - 从 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'

但它给了我意外的 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 模块，并且它可以正常工作。