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

Question

我有一个可以与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它的所有依赖项.这会导致HUGE文件对浏览器性能不是最佳的.

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

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

谢谢!

Answer 1

您可以使用IgnorePluginWebpack.如果您使用的是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的正则表达式过滤器

Answer 2

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

1. 添加target: 'node'到您的webpack.config.js. 这将从捆绑中排除本机节点模块（路径、fs 等）。
2. 使用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 
    ...
};

Answer 3

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

请参阅此处的代码分割以获取更多信息和示例演示用法