javascript - 如何更改 webpack 模块导出需要字符串?
问题描述
例如,当使用 webpack 创建 bundle 时,它输出 angular 如下。
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
但我希望输出是这样的:
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "@angular/core");
网上说你需要改resolve.alias
,但我的理解是如果我改了resolve.alias
,这次我找不到我使用的模块的路径。
我不是很受 webpack 支配,但我确信有解决这个问题的方法。有没有可用的解决方案?
const path = require('path');
module.exports = {
resolve: {
alias: {
//I'm stuck there
}
}
};
更新
这个问题恰好出现在以下场景中,例如 C 模块使用X 库。同时,这个 C 模块在 A 模块下打开,A 模块的子模块。模块 A 和 C 在 2 个不同的项目上编译。我将 X 库捆绑在模块 A中。我没有将X 模块捆绑在 C 模块中。因为我知道在模块 A中,这个模块 X是捆绑的。但是,C 模块开发人员从“ D:\X-Library ”文件路径获取 X 模块引用,而 A 模块开发人员从“ D :\Libraries\X-Library ”获取 X 模块引用" 文件路径。通过这些引用,Webpack 从 bundle 中调用 X 模块。最后,当在 A 模块中打开 C 模块时,当它要使用 X 模块时,它请求" D:\X-Library " as _webpack_require (" D:\X-Library ")。但是,模块 X 被模块 A 注册为_webpack_require (" D:\Librarires\X-Library ")。这就是为什么它不起作用。我希望我可以,A模块的子模块。模块A和C在2个不同的项目上编译。我捆绑了X库在模块 A 内。我没有将 X 模块捆绑在 C 模块内。因为我知道在模块 A 中,这个模块 X 是捆绑的。但是,C 模块开发人员从“ D:\X-Library ”文件路径获取 X 模块引用,而 A 模块开发人员从“ D:\Libraries\X-Library ”文件路径获取 X 模块引用。通过这些引用,Webpack 从包中调用 X 模块。最后,当在A模块内部打开C模块时,当它想使用X模块时,它请求“ D:\X-Library ”作为_webpack_require(“ D:\X-Library ”)。但是,模块 X 被模块 A 注册为_webpack_require (" D:\Librarires\X-Library“)。这就是为什么它不起作用。我希望我能。
解决方案
对于 Angular 8.3.5 版,我通过向 webpack 编写插件得到了解决方案。
在 Compliation Hooks 中,模块 ID 优化后,如果我更改 ID,我可以在创建包之前将其转换为我想要的格式。
module.exports = class ChangeRequireStringPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.hooks.compilation.tap('ChangeRequireStringPlugin', compilation => {
compilation.hooks.afterOptimizeModuleIds.tap('ChangeRequireStringPlugin', (modules) => {
for (let i = 0; i < this.options.length; i++) {
let module = modules.find(s => s.id == this.options[i].path)
if (module) {
module.id = this.options[i].to;
}
}
});
});
}
};
和 webpack.config.js
const path = require('path');
const ChangeRequireStringPlugin = require("./ChangeRequireStringPlugin/ChangeRequireStringPlugin");
module.exports = {
plugins: [new ChangeRequireStringPlugin([
{
path: "./node_modules/@angular/core/fesm2015/core.js",
to:"@angular/core"
}
])]
};
这是最好的解决方案吗?我不确定,但他现在正在做我的工作。
Webpack 5 带有 after Runtime Requirements 选项。当它来的时候,最好用钩子来解决它。https://webpack.js.org/api/compilation-hooks/#beforeruntimerequirements
我实现这个插件的示例项目:https ://github.com/mcantonbul/Angular-Webpack-Change-Require-String
推荐阅读
- python - 如何以不同的方式格式化日期?
- github - Github:如何为我的主分支中的任何合并设置电子邮件通知
- swift - Swift:与对象遵循相同协议的对象数组
- jpa - 从多对多关系的反面编辑关系时未写入数据库
- javascript - 如何将 JSON 对象从 spring 控制器发送到 javascript?
- node.js - 我如何修复“npm init”并且无法升级它
- javascript - Vue.js - 动态创建的复选框的问题:选中一个检查所有并且不能传递动态数据的值
- apache-spark - Pyspark:遍历多行嵌套 json 以构建数据框
- c++ - 如何在 getline() 中使用多个分隔符 (',' , '/n')?
- python - 如何通过附加值产生多个列表对象?