24

我有一个可以与 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，只是想知道是否有另一个/更好的解决方案。

谢谢！

4

4 回答 4

27

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

于 2014-12-03T15:42:53.483 回答
5

为了排除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 
    ...
};
于 2016-03-05T21:51:39.813 回答
1

这对我最有效

var _process;

try {
    _process = eval("process");  // avoid browserify shim
} catch (e) {}

var isNode = typeof _process==="object" && _process.toString()==="[object process]";

因为 Node 会返回true，不仅浏览器会返回false，而且browserifyprocess在编译代码时不会包含它的shim。因此，您的浏览器化代码会更小。

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

于 2015-03-14T01:43:24.670 回答
0

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

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

于 2014-10-05T09:40:40.780 回答