node.js - 如何在 webpack 中隐藏代码而不是在 node.js 中

Question

我正在尝试编写一个可以在 Node.js 和浏览器中运行的库。这段代码使用了window.fetch，所以我需要在服务器上安装一个polyfill。我想编写这样的代码:

'use strict'

let fetch
if (ISNODE) {
  fetch = require('node-fetch')
} else {
  fetch = window.fetch
}

exports.get = params => {
  return window.fetch() // and so forth
}

在 webpack 中，它应该消除 ISNODE 树，以便它根本不会尝试 require('node-fetch')。

你是如何做到这一点的？现在，我正在将 window.fetch 设为全局变量。

Answer 1

您想使用 webpack 的 Define 插件来定义常量，然后使用 Uglify 插件(或类似的插件)来消除死代码/无法访问的代码。

使用 Define 插件，为构建中的环境定义一个“常量”变量，例如 IS_SERVER = true。在您的条件中，检查该常量。请注意，这仅在检查具有 bool 值的变量时有效，因此它会理解 IS_SERVER = true，但不能理解 APP_ENV = 'server'。