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暂时解决了这个问题，并在包含'./adapters/http'时返回undefined。这并不能解决其他开发人员使用CommonJS依赖我的库的用例。除非他们使用类似的排除配置，否则他们的构建将会遇到同样的问题。

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

谢谢！

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

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

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进行捆绑拆分。例如

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

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

4 个答案: