javascript - 如何在使用路径别名导入的文件上使用 Babel?
问题描述
我正在设置我的构建脚本,以便在我的 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
. Babel 使这些导入保持不变。require('@components/something');
而且,正如预期的那样,我的functions
代码不知道@components
解析到哪里。
问题
如何imports
在 Babel 转译过程中访问它们并更新它们?有没有可以做到这一点的插件?我该如何处理?
PS:我想继续使用路径别名,因为导入浅文件的深层文件会变得非常难看。喜欢import helper from '../../../../../../../helpers/someHelper';
。当我这样导入时,如果我移动文件,我会立即中断导入,而import helper from '@helper/someHelper'
根本不会中断。
解决方案
您可以使用https://www.npmjs.com/package/babel-plugin-module-resolver
插件并在那里指定别名,几乎与您在 中所做的相同jsconfig.json
,但在.babelrc
文件中。
推荐阅读
- bash - 如何使用包括 SIGINT 在内的 tee 捕获 stderr 和 stdout 以及时间信息?
- ios - JSON 序列化错误“字符 0 处的值无效
- bash - 第二次颠覆预提交挂钩不起作用
- matlab - 检测医学图像上的噪声存在
- sharepoint - 在 SharePoint 列表中添加门户类别
- android - 我从 android 2.2 升级到 3.1.2 并显示错误
- jquery - 如何使用 Url.Action 帮助器通过 jQuery 将两个参数发送到 MVC Action
- r - 找出每组的最大值
- jquery - 在 GopherJS 中访问 $(this)
- sql - 使用 BCP 命令导出 SQL