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

How can I exclude code path when bundling with webpack/browserify?

提问by mzabriskie

I have a library that can be used with both node.js and the browser. I am using CommonJS then publishing for the web version using webpack. My code looks like this:

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

// 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');
}

The problem I am encountering is that when I run webpack (browserify would do the same) the generated output includes httpalong with all it's dependencies. This results in a HUGE file which is not optimal for browser performance.

我遇到的问题是，当我运行 webpack（browserify 会这样做）时，生成的输出包括http它的所有依赖项。这会导致一个巨大的文件，这对于浏览器性能来说不是最佳的。

My question is how can I exclude the node code path when running a module bundler? I solved this temporarily by using webpack's externals and just returning undefined when including './adapters/http'. This doesn't solve the use case where other developers depend on my library using CommonJS. Their build will end up with the same problem unless they use similar exclude config.

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

I've looked at using envify, just wondering if there is another/better solution.

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

Thanks!

谢谢！

回答by daizhuoxian

You may use IgnorePluginfor Webpack. If you are using a webpack.config.js file, use it like this:

您可以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]
}

To push it further, you may use some flags like process.env.NODE_ENVto control the regex filter of IgnorePlugin

为了进一步推动它，您可以使用一些标志process.env.NODE_ENV来控制 IgnorePlugin 的正则表达式过滤器

回答by lyosef

In order to exclude node_modulesand native node libraries from being bundled, you need to:

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

1. Add target: 'node'to your webpack.config.js. This will exclude native node modules(path, fs, etc.) from being bundled.
2. Use webpack-node-externalsin order to exclude all other node_modules.

1. 添加target: 'node'到您的webpack.config.js. 这将从捆绑中排除本机节点模块（路径、fs 等）。
2. 使用webpack-node-externals以排除所有其他node_modules.

So your result config file should look like:

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

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

回答by Steven Vachon

This worked best for me

这对我来说效果最好

var _process;

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

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

as Node will return trueand not only will the browser return false, but browserifywill not include its processshim when compiling your code. As a result, your browserified code will be smaller.

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

Edit: I wrote a package to handle this more cleanly: broquire

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

回答by trekforever

You can use require.ensurefor bundle splitting. For example

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

See code splittingfor more information and a sample demo usage here

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