节点进程对象可供浏览器客户端代码使用

Question

我试图了解 webpack 如何使用 DefinePlugin。我有：

 new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('development'),
}),

和一个功能：

 export const foo = () => {
  console.log(process)
  console.log(process.env.NODE_ENV)
}
window.foo = foo

当我打印 foo 时，我在浏览器控制台中看到以下内容：

 ƒ foo() {
  console.log(process);
  console.log("development");
}

似乎变量“development”是在 webpack 编译输入文件时注入的。同时 webpack 也将进程对象注入到 JavaScript 代码中，浏览器确实在调用 foo 时打印出了进程对象：

 {title: "browser", browser: true, env: {…}, argv: Array(0), nextTick: ƒ, …}

我的问题是，作为一个Node概念的process对象如何被浏览器使用？

事实上，如果我这样做：

 window.process = process

我可以在浏览器控制台中直接使用 process.nextTick！我认为 nextTick 函数是特定于 Node 的实现！有人可以解释一下吗？

谢谢！

原文由 platypus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

webpack 如何处理 Node globals 和 webpack.DefinePlugin 实际上是两个不同的问题。

默认 节点全局变量 是 全局注入 的，而在 webpack.DefinePlugin 中定义的 常量 在所有代码库中 被一一替换。

例如：

 // config
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('development'),
  'process.env.MY_VAR': {foo: JSON.stringify('bar')},
}),

// source
console.log('process.env.NODE_ENV', process.env.NODE_ENV);
console.log('process.env.MY_VAR', process.env.MY_VAR);

console.log('process.env', process.env);
console.log('process', process);

// compiled
console.log('process.env.NODE_ENV', "development");
console.log('process.env.MY_VAR', __webpack_require__.i({"foo":"bar"}));
console.log('process.env', process.env);
console.log('process', process);

Note that process.env.NODE_ENV and process.env.MY_VAR p hysically are replaced , while process.env and process keep their reference to the process 模拟。

但是 webpack.DefinePlugin 也能够 覆盖模拟的 process 对象（或只是它的一部分）：很多权力意味着获得 意外行为 的风险。

来自 Webpack 文档：

当为进程定义值时，首选 ‘process.env.NODE_ENV’: JSON.stringify(‘production’) over process: { env: { NODE_ENV: JSON.stringify(‘production’) } }。使用后者将覆盖进程对象，这可能会破坏与某些期望在进程对象上定义其他值的模块的兼容性。

例如：

 // config
new webpack.DefinePlugin({
  'process': JSON.stringify('override'),
  'process.env.NODE_ENV': JSON.stringify('development'),
}),

// source
console.log('process', process);
console.log('process.env', process.env);
console.log('process.env.NODE_ENV', process.env.NODE_ENV);

// compiled
console.log('process', "override");
console.log('process.env', "override".env);          // [boum!]
console.log('process.env.NODE_ENV', "development");  // [replaced by DefinePlugin!]

原文由 Andrea Carraro 发布，翻译遵循 CC BY-SA 4.0 许可协议