實戰pomelo過程中,自己重新進行component build之后發現輸出的網頁在瀏覽器端報錯:
Uncaught ReferenceError: Buffer is not defined 閱讀代碼后分析如下:
模塊 pomelo-protocol 的代碼,試圖兼容node.js與瀏覽器端,其區分方法是 判斷module是否是一個object。
('object' === typeof module ? module.exports : (this.Protocol = {}),'object' === typeof module ? Buffer : Uint8Array, this);
在node.js中,module是一個object,而在瀏覽器端,早期版本的component實現 把module的函數自身作為最后一個參數(命名為module)
if (!module.exports) {
module.exports = {};
module.client = module.component = true;
module.call(this, module.exports, require.relative(resolved), module);
}
所以typeof(module)得到的是一個function。
但是隨著component的更新,component改變了這個特性:
if (!module._resolving && !module.exports) {
var mod = {};
mod.exports = {};
mod.client = mod.component = true;
module._resolving = true;
module.call(this, mod.exports, require.relative(resolved), mod);
delete module._resolving;
module.exports = mod.exports;
}
可以看到最后一個參數現在是一個新創建出來的Object,所以現在在瀏覽器上,pomelo-protocol也認為現在正在node.js環境中,于是就報錯了。
一個
臨時的workaround辦法是,在require("promelo-protocol")之前,先準備好Buffer,代碼如下:
window.Buffer = Uint8Array;
var protocol = require('pomelo-protocol');
window.Protocol = protocol;
delete window.Buffer;
這樣問題暫時消除了。當然,最靠譜的辦法還是在pomelo-protocol中修改識別環境的辦法。稍后我會向pomelo提交pull-request幫助解決這一問題。