close
ECMAScript 6 是新一代的 JavaScript 標準,
在新的標準中,
有一點是定義如何將 JavaScript 模組化。
本篇文章,
並不在討論或分享模組化該怎麼寫,
而是紀錄並分享如何在 YUI 上 載入 用 ECMAScript 6 的模組化標準寫的 JavaScript 。
其實現狀,
應該是瀏覽器都不太支援 ECMAScript 6 模組化語法。
不過,
網路上的大大們寫了 es6-module-transpiler 的 node package,
透過這個套件,
可以將以下 ECMAScript 6 的 模組化語法轉換成現在可運作的 JavaScript,目前支援 AMD,CommonJS 跟 YUI。
/*jshint esnext:true */ // this is es6.js var foo = 'foo', bar = function () { return foo; }; export { foo, bar };
以 YUI 為例,
我們可以
$ npm install -g es6-module-transpiler $ compile-modules es6.js --to es6yui --type=yui --infer-name
然後就會生成
YUI.add("es6", function(Y, NAME, __imports__, __exports__) { "use strict"; /*jshint esnext:true */ var foo = 'foo', bar = function () { return foo; }; __exports__.foo = foo; __exports__.bar = bar; return __exports__; }, "@VERSION@", {"es":true,"requires":[]});
接下來,
只要在 HTML 裡面,
利用類似以下程式碼就可以載入剛剛我們轉換出來的 JavaScript
YUI().require('es6', 'node', function (Y, __imports__) { var demo = Y.one('#demo'), foo = __imports__['es6'].foo; bar = __imports__['es6'].bar; demo.on('click', function (e) { demo.set('text', foo + ' clicked ' + bar()); }); });
參考資料:
1. https://github.com/square/es6-module-transpiler
2. http://yuilibrary.com/yui/docs/yui/es6-modules.html
3. http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_require
全站熱搜
留言列表