如何在使用路徑別名導入的文件上使用 Babel？

Question

我正在設置我的構建腳本，以便在我的 web 應用程序的某些路由上進行服務器端渲染。 我正在使用 React 和 Firebase。 現在，我的項目結構是。

root

> buildScripts        // Some build scripts to replace some import paths

> functions
  > distApp           // React app files (src folder down below) transpiled to Node v10
  > distFunctions     // Cloud functions files transpiled to Node v10
    function1.js
  > src               // Cloud functions files written in ES6
    function1ES6.js
  index.js            // indexES6 transpiled to Node v10
  indexES6.js         // index.js written in ES6
  package.json        // Dependencies for functions

> src                 // React app files written in ES6
firebase.json         // Firebase configuration
package.json          // Dependencies for client

作為我的構建流程，我打算做什么：

• 將 ES6 中的 function 文件轉換為 Node v10 環境。 從functions/src到functions/distFunctions 。
• 將functions/indexES6.js為functions/index.js /index.js
• 將 App 文件從root/src轉換為functions/distApp （這是我當前的問題）

我最終使用了一些路徑別名來使整個應用程序中的一些imports更加清晰。 像下面列出的那些：

jsconfig.json

"paths": {
        "@components/*": ["./src/components/*"],
        "@constants/*": ["./src/constants/*"],
        "@helpers/*": ["./src/helpers/*"]
      }

當我構建生產（客戶端瀏覽器代碼）時，我正在使用 Webpack 處理這些路徑。 我添加了一個resolve屬性，因此 Webpack 知道如何處理它們。 並正確捆綁它。

webpack.config.js

resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@constants': path.resolve(__dirname, 'src/constants'),
      '@helpers': path.resolve(__dirname, 'src/helpers')
    }
  }

所以 Webpack 知道如何解決和替換這些導入。 但巴別塔沒有。

然后，當我將我的root/src文件夾中的所有應用程序文件轉換到我的functions/distApp 。 Babel 使這些導入保持不變。 require('@components/something');

而且，正如預期的那樣，我的functions代碼不知道@components解析到哪里。

問題

如何在 Babel 轉譯過程中訪問這些imports並更新它們？ 有沒有可以做到這一點的插件？ 我該如何處理？

PS：我想繼續使用路徑別名，因為導入淺文件的深層文件會變得非常難看。 就像import helper from '../../../../../../../helpers/someHelper'; . 當我像這樣導入時，如果我移動文件，我會立即中斷導入，而import helper from '@helper/someHelper'根本不會中斷。

Answer 1

您可以使用https://www.npmjs.com/package/babel-plugin-module-resolver插件並在那里指定別名，幾乎與您在jsconfig.json中所做的方式相同，但在.babelrc文件中。