如何在使用路径别名导入的文件上使用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中的函数文件传输到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知道如何解决和替换这些导入。但巴贝尔没有。

然后，当我将root/src文件夹中的所有应用程序文件传输到functions/distApp时。巴贝尔对这些进口商品保持原状。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文件中使用相同。