与 webpack/browserify 捆绑时如何排除代码路径？答案

【问题标题】：How can I exclude code path when bundling with webpack/browserify?与 webpack/browserify 捆绑时如何排除代码路径？
【发布时间】：2014-11-08 04:10:27
【问题描述】：

我有一个可以与 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 以及它的所有依赖项。这会产生一个对于浏览器性能而言并非最佳的巨大文件。

我的问题是如何在运行模块捆绑器时排除节点代码路径？我通过使用 webpack 的外部临时解决了这个问题，并在包含'./adapters/http' 时返回未定义。这并不能解决其他开发人员使用 CommonJS 依赖我的库的用例。除非他们使用类似的排除配置，否则他们的构建最终会遇到同样的问题。

我看过使用 envify，只是想知道是否有其他/更好的解决方案。

谢谢！

【问题讨论】：

标签： javascript node.js build webpack

【解决方案1】：

这对我来说效果最好

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 shim。因此，您的浏览器化代码会更小。

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

【讨论】：

【解决方案2】：

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

将target: 'node' 添加到您的webpack.config.js。这将使exclude native node modules（路径、fs 等）不被捆绑。
使用webpack-node-externals 排除所有其他node_modules。

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

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 
    ...
};

【讨论】：

【解决方案3】：

您可以将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 的正则表达式过滤器

【讨论】：

【解决方案4】：

您可以使用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');
    });
}

请参阅code splitting 了解更多信息和示例演示用法here

【讨论】：