Webpack 条件 require

Question

我正在使用webpack编写一种同构键值存储。

目前我加载库的方法是这样的，但显然不起作用，因为webpack想要同时解析两个require。什么是正确的方法？

var db = null;

if (typeof window === 'undefined') {
    // node context
    db = require('level');
} else {
    // browser context
    db = require('gazel');
}

我知道你可以为webpack提供一个目标，但我不知道如何使用它。

谢谢！

- vardump

---

查看此SO问题，该问题涉及基于环境的条件构建。 - r0dney

谢谢，确实有效 :) 我在webpack中设置了一个__BROWSER__插件，现在我正在使用普通的nodejs（node file.js）和webpack进行浏览器构建。 - vardump

Answer 1

我认为 resolve.alias 可以帮助你。你可以根据创建的构建版本，将 db 模块指向 level 或 gazel。

- Juho Vepsäläinen

---

更新的链接：https://webpack.js.org/configuration/resolve/#resolve-alias - Blazes

Answer 2

webpack配置文件

module.exports = {
plugins: [
    new webpack.DefinePlugin({
        "process.env": {
            BROWSER: JSON.stringify(true)
        }
    })
]}

你的通用.js

var db = null;
if (!process.env.BROWSER) {
    // node context
    db = require('level');
} else {
    // browser context
    db = require('gazel');
}

- Lonelydatum

---

只是一个小问题，但为什么有这么多人用JSON.stringify(true)这种东西？这实际上（实际上）等同于"true"。 - Jason Boyd

@JasonBoyd 我也很好奇，我想这种写法最初是为了引起注意，因为在使用字符串值时，人们很容易误解需要在'process.env.NODE_ENV': '"production"'中添加额外引号的原因。特别是在"true"的情况下，他们可能会错误地将其删除。 - Andy

额外的引号是必需的，因为值字符串直接插入源代码中替换引用。通过配置DefinePlugin以替换 'process.env.NODE_ENV': '"production"'，代码 if (process.env.NODE_ENV == "production") { ... } 变成了 if ("production" == "production") { ... }。如果没有额外的引号，将变成 if (production == "production") { ... }，使用一个未声明的变量。 - pvande

小心使用这种方法，因为如果例如“level”是一个纯粹的nodeJS（服务器）模块，webpack将无法编译您的代码。最好使用第一个答案来“存根”任何纯服务器端所需的模块。 - GabiDi

这应该是 if(process.env.BROWSER === 'true') {} 吗？ - Danny R