我正在设置构建脚本,以便在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
我打算在构建流程中做什么:
functions/src
到functions/distFunctions
。functions/indexES6.js
传送到functions/index.js
root/src
传输到functions/distApp
(这是我的当前问题)>] >>我最终使用一些路径别名使整个App中的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'
则完全不会中断。我正在设置构建脚本,以便在Web应用程序的某些路由上进行服务器端渲染。我正在使用React和Firebase。现在,我的项目结构是。 root> buildScripts // ...
您可以使用https://www.npmjs.com/package/babel-plugin-module-resolver
插件并在其中指定别名,几乎与在jsconfig.json
中所做的相同,但在.babelrc
文件中。