Node进程对象可用于浏览器客户端代码
我正在尝试了解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");
}
似乎在webpack编译输入文件时注入了变量“ development”。同时，webpack还将流程对象注入到JavaScript代码中，并且在调用foo时浏览器确实打印出了流程对象：
{title: "browser", browser: true, env: {…}, argv: Array(0), nextTick: ƒ, …}
我的问题是，如何使过程概念（Node概念）对浏览器可用？
实际上，如果我这样做：
window.process = process
我可以在浏览器控制台内部使用process.nextTick！我认为nextTick函数是特定于Node的实现！有人可以解释吗？
谢谢！
回答如下：如此处https://webpack.js/configuration/node/#node-process所述，Webpack可以为不同的节点功能制作polyfill，但由于node.process是"mock"，因此看起来很像； “ mock”：提供一个实现预期接口但功能很少或没有功能的模拟。
您是否已对其进行测试以查看其是否确实有效？它可能只是一个空壳。
如果可行，我假设该插件实际上使用了类似node-process的功能，如此博客文章所示：http://timnew.me/blog/2014/06/23/process-nexttick-implementation-in-browser/
从该博客文章中复制：
process.nextTick = (function () {
var canSetImmediate = typeof window !== 'undefined'
&& window.setImmediate;
var canPost = typeof window !== 'undefined'
&& window.postMessage && window.addEventListener;
if (canSetImmediate) {
return function (f) { return window.setImmediate(f) };
}
if (canPost) {
var queue = [];
window.addEventListener('message', function (ev) {
var source = ev.source;
if ((source === window || source === null) && ev.data === 'process-tick') {
ev.stopPropagation();
if (queue.length > 0) {
var fn = queue.shift();
fn();
}
}
}, true);
return function nextTick(fn) {
queue.push(fn);
window.postMessage('process-tick', '*');
};
}
return function nextTick(fn) {
setTimeout(fn, 0);
};
})();
从您提供的信息中肯定很难知道。如果确实有效，我认为您很有可能已在节点应用程序中启用了Browserify。也许您在这里找到了所需的内容：https://webpack.js/loaders/transform-loader/#src/components/Sidebar/Sidebar.jsx希望您发现此答案有所帮助。
最重要的是，我相信它是从某个地方来的一个polyfill。
Node进程对象可用于浏览器客户端代码
我正在尝试了解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");
}
似乎在webpack编译输入文件时注入了变量“ development”。同时，webpack还将流程对象注入到JavaScript代码中，并且在调用foo时浏览器确实打印出了流程对象：
{title: "browser", browser: true, env: {…}, argv: Array(0), nextTick: ƒ, …}
我的问题是，如何使过程概念（Node概念）对浏览器可用？
实际上，如果我这样做：
window.process = process
我可以在浏览器控制台内部使用process.nextTick！我认为nextTick函数是特定于Node的实现！有人可以解释吗？
谢谢！
回答如下：如此处https://webpack.js/configuration/node/#node-process所述，Webpack可以为不同的节点功能制作polyfill，但由于node.process是"mock"，因此看起来很像； “ mock”：提供一个实现预期接口但功能很少或没有功能的模拟。
您是否已对其进行测试以查看其是否确实有效？它可能只是一个空壳。
如果可行，我假设该插件实际上使用了类似node-process的功能，如此博客文章所示：http://timnew.me/blog/2014/06/23/process-nexttick-implementation-in-browser/
从该博客文章中复制：
process.nextTick = (function () {
var canSetImmediate = typeof window !== 'undefined'
&& window.setImmediate;
var canPost = typeof window !== 'undefined'
&& window.postMessage && window.addEventListener;
if (canSetImmediate) {
return function (f) { return window.setImmediate(f) };
}
if (canPost) {
var queue = [];
window.addEventListener('message', function (ev) {
var source = ev.source;
if ((source === window || source === null) && ev.data === 'process-tick') {
ev.stopPropagation();
if (queue.length > 0) {
var fn = queue.shift();
fn();
}
}
}, true);
return function nextTick(fn) {
queue.push(fn);
window.postMessage('process-tick', '*');
};
}
return function nextTick(fn) {
setTimeout(fn, 0);
};
})();
从您提供的信息中肯定很难知道。如果确实有效，我认为您很有可能已在节点应用程序中启用了Browserify。也许您在这里找到了所需的内容：https://webpack.js/loaders/transform-loader/#src/components/Sidebar/Sidebar.jsx希望您发现此答案有所帮助。
最重要的是，我相信它是从某个地方来的一个polyfill。