我有一个简单的节点项目,我使用webpack-stream(通过Gulp)将多个JS文件捆绑到一个输出文件中。webpack必须以这样一种方式连接文件,看起来就像您在一个文件中编写了所有代码。
例如,输出文件的运行时期望全局声明startTest()
函数。
出于这个原因,我禁用了某些优化,这些优化将封装或缩小输出代码。
考虑以下我的项目的简化代码:
main.js:
import VoiceGender from "./models/VoiceGender";
console.log(VoiceGender.MALE);
function startTest() {
console.log(VoiceGender.MALE);
}
VoiceGender.js:
const VoiceGender = {
MALE: 'M',
FEMALE: 'F'
}
export default VoiceGender;
webpack配置:
{
"mode":"production",
"output":{
"iife":false,
"filename":"bundle.js"
},
"optimization":{
"minimize":false,
"usedExports":false,
"mangleExports":false
},
"cache":{
"type":"filesystem"
}
}
bundle.js(webpack输出):
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
;// CONCATENATED MODULE: ./src/models/VoiceGender.js
const VoiceGender_VoiceGender = {
MALE: "M",
FEMALE: "F"
};
/* harmony default export */ const models_VoiceGender = (VoiceGender_VoiceGender);
;// CONCATENATED MODULE: ./src/main.js
console.log(models_VoiceGender.MALE);
function startTest() {
console.log(VoiceGender.MALE);
}
请注意,startTest()
函数上面的console.log(..)
使用Webpack生成的名称(这很好),但在startTest()
函数内部,它不使用该引用。这是错误的引用,因为Webpack在models_VoiceGender
和VoiceGender_VoiceGender
下声明了模块,而不是VoiceGender
。
我不知道是什么引起的。可能是个虫子?我试着在某些属性上玩,但我看不到任何变化。
webpack-stream版本:^7.0.0
gulp版本:^4.0.2
webpack版本(通过webpack-stream):^5.21.2
**UPDATE:**在startTest()
函数中添加export
时,引用是固定的。或者,在该脚本中调用startTest()
也会修复该引用。我已经将webpack配置为不排除“未使用”的代码,但它似乎没有正确地捆绑未使用的代码。
1条答案
按热度按时间pod7payv1#
我已经让这个坐了一会儿,看看是否有更多的人可以在这个权衡,但我认为这实际上是一个错误或webpack的副作用,我应该报告它。
基本上,webpack被配置为保留未使用的代码。即使运行时会调用
startTest()
函数,webpack也不知道,所以对于webpack来说,这是未使用的代码。出于某种原因,webpack没有“努力”在“未使用”的代码中使用正确的模块名称。我想这是一个bug。
解决方法是使代码显示为由以下人员使用:
1.将
export
添加到函数中1.在JS中调用函数(不适合我的用例)
所以最后,解决方法是好的,也许它们在语义上是正确的。