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。