如何在使用路径别名导入的文件上使用 Babel？

Question

我正在设置我的构建脚本，以便在我的网络应用程序的某些路由上进行服务器端渲染。我正在使用 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 中的函数文件转换为 Node v10 环境。从functions/src 到functions/distFunctions。
• 将functions/indexES6.js 转换为functions/index.js
• 将应用程序文件从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 知道如何解决和替换这些导入。但 Babel 没有。

然后，当我将我的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 文件中。