你如何在 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。在您的条件中，检查该常量。请注意，这仅在检查具有布尔值的变量时有效，因此它会理解 IS_SERVER = true，但不能理解 APP_ENV = 'server'，例如。