如何在同一個存儲庫中的兩個Meteor應用之間共享React組件？

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' *中的import SharedComponent from 'my-app/common/SharedComponent' 。

根導入

或使用root導入，您的.babelrc將類似於：

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

..，然后可以使用語法'從'〜/ my-app / common / SharedComponent'*導入SharedComponent。

*只要您使用babelrc文件，並且my-app是項目的根目錄。

Answer 2

流星用戶：即使通過符號鏈接使用，也不要忘記將所有導出的文件放在“ imports”文件夾中。 因為流星試圖加載熱切我的文件放在我我不確定變量的錯誤common文件夾。

因此，遵循@bitten建議並從創建符號鏈接開始。 Git應該能很好地處理（參見git如何處理符號鏈接？ ）： ln -s ../common/

然后，您可以使用https://github.com/mantrajs/babel-root-slash-import （實際上是babel-root-import的fork）來簡化導入路徑。 （感謝@bitten）。