Question

我有一个客户端应用程序，它使用了一些浏览器全局属性，如Element或document。

我也想在node.js中运行我的应用程序，目前我在服务器中用domino dom implementation覆盖那些全局变量，如下所示：

const domino = require("domino");

const domimpl = domino.createDOMImplementation();
const document = domimpl.createHTMLDocument();

Object.assign(global, Element: domino.impl.Element, document};

const myApp = require('my-app');

我目前正在使用汇总来捆绑my-app的不同版本，如何为_server my-app my-app版本自动为我执行此操作，以便^(M(|A(|K(|E)))|A(|K(|E))|K(|E)|E)$的消费者不必这样做？

我正在考虑编写自己的汇总插件，但我觉得重写全局变量似乎是一种常见的做法。

Answer 1

<强> TLDR;使用单独的输入文件而不是汇总插件。

只需添加以下内容而不是汇总插件

if (typeof window ==== "undefined") {
  const domino = require("domino");    
  const domimpl = domino.createDOMImplementation();
  const document = domimpl.createHTMLDocument();    
  Object.assign(global, Element: domino.impl.Element, document};
}

// my-app code

您可能会担心domino输入客户端代码。要解决这个问题，请为服务器和客户端使用单独的bundle，将上面的模拟代码包装在一个单独的文件中，并在my-app的服务器包主文件中使用以下内容，这种方法类似于React {{ 3}}

服务器主文件

require(‘./globals-mocking’);
// my-app client code

客户主文件

// my-app client code only

包的主文件

if (SERVER_ONLY) {
  module.exports = require('./my-app-server.js'); 
} else { 
  module.exports = require('./my-app-client.js'); 
}

使用汇总的ships production and development bundles - conditional imports.并定义SERVER_ONLY（replace plugin）仅用于服务器输入。如果您使用UglifyJS或simlilar工具来消除死代码，那么您将不会拥有domino和重复的服务器代码。

编辑：注意到一个小问题。条件应为if (SERVER_ONLY) {。将以下定义与服务器条目文件一起使用。

  plugins: [
    replace({
      SERVER_ONLY: JSON.stringify(true)
    })
  ]

在捆绑到umd或commonjs时定义全局变量

1 个答案: