使用babel导入根文件夹外的组件

Question

我有多个项目在 monorepo: 中进行反应app1 app2 app3，每个应用程序都是使用 webpack 和 babel 构建的。

我想创建一个共享目录，其中包含应用程序之间的共享组件，因此我在 monorepo 中创建了另一个目录shared。

（我在每个项目中执行npm i ../shared）

但是当我从shared其中一个应用程序内部导入组件时，babel 会抛出异常：Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

注意：如果我从中导入简单的函数shared，它就可以工作，只有在导入组件时它才不起作用。

我可以添加什么配置才能创建包含共享组件的共享目录？

我在每个应用程序中的文件.babelrc如下所示

{
   "presets": [
    [
        "@babel/preset-env",
        {
            "targets": {
                "browsers": ["chrome >= 50"]
            },
            "useBuiltIns": "usage",
            "corejs": 3
        }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
    ],
    "plugins": ["@babel/plugin-syntax-jsx", "@babel/plugin-transform-react-jsx", "@babel/plugin-transform-runtime"]
}

Answer 1

您可以创建指向外部包的链接：
使用 npm 安装本地模块

如果您在团队中工作，另一种可能性是更复杂的方法：
通过 Git 获取 npm 模块

至于插件的声明，请参阅文档（您需要一个“plugins”数组，请参阅链接）：
babel js plugins