Question

Webpack对我们编写同构Javascript非常有用，并且在捆绑时替换浏览器全局变量的npm包。

所以，如果我想在Node.js上使用node-fetch npm包，但在捆绑时将其排除，只使用本地浏览器fetch全局，我可以在我的webpack.config.js：

{
  externals: {
    'node-fetch': 'fetch',
    'urlutils': 'URL',
    'webcrypto': 'crypto', // etc
  }
}

然后我的CommonJS要求const fetch = require('node-fetch')将被转换为const fetch = window.fetch（或无论它做什么）。

到目前为止一切顺利。 这是我的问题：当需要整个模块时，这很容易，但是当我需要输出模块的子模块/单个属性时呢？

例如，假设我想使用WhatWG URL standard，同构。我可以使用urlutils npm模块，module.exports整个网址类，所以我的要求如下：

const URL = require('urlutils')

然后我可以在urlutils部分列出externals，没有任何问题。但是，当我想使用更新的（并且更受支持的）npm软件包时，例如whatwg-url，我不知道如何对其进行Webpack，因为我的要求如下：

const { URL } = require('whatwg-url')
// or, if you don't like destructuring assignment
const URL = require('whatwg-url').URL

如何告诉Webpack用浏览器全局require('whatwg-url').URL替换URL的出现次数？

Answer 1

首先，我想强调一点，我不是网络专家。我认为在构建期间有更好的捆绑方式。无论如何，这是我的想法：

webpack.config.js

  module.exports = {
    target: "web",
    entry: "./entry.js",
    output: {
      path: __dirname,
      filename: "bundle.js"
    }
  };

entry.js

  var URL = require("./content.js");
  document.write('Check console');
  console.log('URL function from content.js', URL);

content.js

  let config = require('./webpack.config.js');
  let urlutils = require('urlutils');
  let whatwgUrl = require('whatwg-url');

  console.log('urlutils:', urlutils);
  console.log('whatwgUrl', whatwgUrl);

  module.exports = {
    URL: undefined
  };

  if (config.target === 'web') {
    module.exports.URL = urlutils;
  } else {
    module.exports.URL = whatwgUrl.URL;
  }

index.html

  <html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
  </html>

正如我在评论中所说，它将捆绑两个用于Web捆绑的库 - 浪费空间。

现在，对于NodeJS，您将target从web更改为node，它应该使用其他库。 https://webpack.github.io/docs/configuration.html#target

我找到了一个同构＆＃39;的模块。应用：https://github.com/halt-hammerzeit/universal-webpack

我认为你可以尝试使用两个独立的中间content.js文件作为模块的参数。一个包含urlutis和第二个whatwg-url。然后它会动态识别它为你的文件编译的内容并使用适当的模块。

希望它有所帮助。

使用库组件/片段排除Webpack外部

1 个答案: