如何在与webpack / browserify捆绑时排除代码path？

我有一个可以与node.js和浏览器一起使用的库。 我正在使用CommonJS，然后使用webpack发布为web版本。 我的代码如下所示：

// For browsers use XHR adapter if (typeof window !== 'undefined') { // This adapter uses browser's XMLHttpRequest require('./adapters/xhr'); } // For node use HTTP adapter else if (typeof process !== 'undefined') { // This adapter uses node's `http` require('./adapters/http'); } 

我遇到的问题是，当我运行webpack（browserify会做同样的）生成的输出包括http及其所有依赖关系。 这导致一个巨大的文件，这是不是最佳的浏览器性能。

我的问题是如何在运行模块捆绑器时排除节点代码path？ 我通过使用webpack的外部解决scheme暂时解决了这个问题，只是在包含'./adapters/http'时才返回undefined。 这并不能解决其他开发人员依赖我的库使用CommonJS的用例。 他们的构build最终会遇到相同的问题，除非他们使用类似的排除configuration。

我已经看过使用envify，只是想知道是否有另一个/更好的解决scheme。

谢谢！

Answer 1

您可以使用IgnorePlugin作为Webpack。 如果你正在使用一个webpack.config.js文件，像这样使用它：

 var webpack = require('webpack') var ignore = new webpack.IgnorePlugin(/^(canvas|mongoose|react)$/) module.exports = { //other options goes here plugins: [ignore] } 

要进一步推进，你可以使用像process.env.NODE_ENV这样的标志来控制IgnorePlugin的正则expression式filter

Answer 2

为了排除node_modules和本地节点库的捆绑，您需要：

1. 添加target: 'node'到你的webpack.config.js 。 这将排除本地节点模块 （path，fs等）被捆绑。
2. 使用webpack-node-externals为了排除所有其他node_modules 。

所以你的结果configuration文件应该是这样的：

 var nodeExternals = require('webpack-node-externals'); ... module.exports = { ... target: 'node', // in order to ignore built-in modules like path, fs, etc. externals: [nodeExternals()], // in order to ignore all modules in node_modules folder ... }; 

Answer 3

这对我来说最合适

 var _process; try { _process = eval("process"); // avoid browserify shim } catch (e) {} var isNode = typeof _process==="object" && _process.toString()==="[object process]"; 

因为Node将返回true ，不仅浏览器将返回false ，而且在编译代码时， browserify将不包含其process填充。 因此，您的浏览器代码会更小。

编辑 ：我写了一个包来处理这个更干净： broquire

Answer 4

您可以使用require.ensure进行require.ensure分割。 例如

 if (typeof window !== 'undefined') { console.log("Loading browser XMLHttpRequest"); require.ensure([], function(require){ // require.ensure creates a bundle split-point require('./adapters/xhr'); }); } else if (typeof process !== 'undefined') { console.log("Loading node http"); require.ensure([], function(require){ // require.ensure creates a bundle split-point require('./adapters/http'); }); } 

有关更多信息和示例演示用法，请参阅代码分割