我正在设置构建脚本，以便在我的网络应用程序的某些路由上进行服务器端渲染。我正在使用 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 to functions/distFunctions.
- 转译
functions/indexES6.js to functions/index.js
- 转译应用程序文件
root/src to 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决心。
QUESTION
我怎样才能访问这些imports在 Babel 转译过程中并更新它们？有没有一个插件可以做到这一点？我该如何处理这个问题？
PS:我想继续使用路径别名，因为导入浅文件的深层文件可能会变得非常难看。喜欢import helper from '../../../../../../../helpers/someHelper';。当我像这样导入时，如果我移动文件，我会立即中断导入，而import helper from '@helper/someHelper'根本不会破裂。
