使用 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. 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

您可以創建指向外部 package 的鏈接：
使用 npm 安裝本地模塊

如果您在團隊中工作，另一種可能性是更復雜的方法：
通過Git獲取npm模塊

至於插件的聲明，請參閱文檔（您需要一個“插件”數組，請參閱鏈接）：
babel js 插件

Answer 2

看來，這更像是webpack而不是babel問題。 錯誤彈出，因為您的babel-loader配置不正確。

在構建中添加“外部文件夾/模塊”時，您通常需要執行（或至少檢查）以下操作：

1. 將shared文件夾的src文件夾添加到您的babel-loader的include （如果尚未包含）
   • -> 這可以確保事情得到很好的 babel'ed，並且您的preset-react實際上會起作用）。
   • -> 確保不要包含太多（例如，永遠不要完整包含任何node_modules文件夾，否則事情會非常緩慢）。
2. 您可能還必須將shared文件夾添加到您的babel-loader的babelrcRoots ，因為否則，它將忽略其.babelrc.js文件（如果它與您的babel-loader的默認配置不同），因此只能使用默認設置，忽略您的preset-react 。
3. 通常，您還需要將shared文件夾的src文件夾添加到 webpack.config 的resolve.modules中：
   • -> 這也允許webpack在該文件夾中執行它的解析魔法。
   • 如果它有自己的node_modules ，也將其添加到resolve.modules 。
   • 有關此特定問題的更多信息，請參見此處。