javascript - 如何将同构的 commonJS 代码与 webpack 捆绑在一起

Question

我有一个使用 nodeJS 模块格式 (commonJS) 的项目，也应该(部分地)在浏览器中运行。

我确实有非同构代码路径，其中我有条件地包含模块:

var impl;
try {
    // in node, use node-impl
   impl = require('../node-impl');
} catch (err) {
    // running in browser, use browser-impl
    impl = require('../browser-impl');
}

现在，我想使用 webpack 创建一个在浏览器中运行的包。因此，我需要在 webpack.config.js 中将外部(特定于 nodeJS 的)模块定义为 external，这样它们就不会包含在包中:

external: {
    '../node-impl': true
}

我验证了 '../node-impl' 代码实际上没有包含在 bundle 中，但是发出的代码看起来像这样:

/***/ },
/* 33 */
/***/ function(module, exports) {

    module.exports = ../node-impl;

/***/ },

这是语法错误的 JS，浏览器会在那里抛出语法错误。

如何使用 webpack.js 正确处理这种情况？请注意，我不希望使用 webpack 来运行 nodeJS，只有浏览器包应该使用 webpack 创建。

Answer 1


//你的实际情况:
变种暗示；
尝试 {
impl = require('../node-impl');
} 捕获(e){
impl = require('../browser-impl');
}


您需要将此代码段重构为:

var impl = require('../node-impl');

这次返工后，您的代码只能在 node js 环境 中工作，这很好，因为我们将在为浏览器捆绑时模拟 此请求。 ..
//webpack.browser.config.js
模块.exports = {
解决: {
别名:{
'../node-impl': '../browser-impl'
}
}
};


Webpack - Resolve.Alias或者使用 package.json#browser，或者 https://webpack.github.io/docs/configuration.html#resolve-packagealias