Question

我有两个共享一些React组件的应用程序（public-app和admin-app）。这些共享组件位于存储库根目录的common文件夹中。所以我想说：

my-app
  |__admin-app
     |__client
        |__imports
           |__Component.js
  |__public-app
  |__common
     |__SharedComponent.js

在Component.js中，我尝试通过执行以下操作导入SharedComponent.js：

import SharedComponent from '../../../common/SharedComponent'

......但它不起作用，它找不到模块。

这应该是可能的，因为它是官方文档（https://guide.meteor.com/structure.html#sharing-code）中推荐的方法之一，所以任何帮助都将非常感谢！

Answer 1

如果您使用babel来转换代码，我使用root-import插件解决了这个问题。您可以查看此插件，以帮助您使用相同的语法要求您的文件指向同一文件夹。

对于babel插件，我建议您查看module-alias或babel-root-import。

模块别名

使用模块别名，您的.babelrc看起来像这样：

{
    "presets" : ["es2015", "react"],
    "plugins": [
        [
            "module-alias",
            [
                { "src": "./my-app", "expose": "my-app" },
            ]
        ]
    ],
}

..然后您可以使用语法import SharedComponent from 'my-app/common/SharedComponent' *。

root import

或者使用root-import，您的.babelrc将类似于：

{
    "presets" : ["es2015", "react"],
    "plugins": [
        ["babel-root-import"]
    ]
}

..然后你就可以使用`import SharedComponent from＆＃39;〜/ my-app / common / SharedComponent＆＃39; *。

*只要您使用babelrc文件且my-app是项目的根目录。

Answer 2

流星用户：不要忘记将所有导出的文件放入＆＃34;导入＆＃34;文件夹，即使通过符号链接使用。我有一个未定义变量的错误，因为Meteor试图急切地加载放在common文件夹中的文件。

所以，请关注@bitten建议，然后创建符号链接。 Git应该很好地处理（参见How does git handle symbolic links?）：ln -s ../common/

然后，您可以使用https://github.com/mantrajs/babel-root-slash-import实际上来自babel-root-import的分叉来简化导入路径。（谢谢@bitten）。

如何在同一个存储库中的两个Meteor应用程序之间共享React组件？

2 个答案:

模块别名

root import