Using ES6 modules with YUI @ 賽拉維的秋天

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

4. http://wiki.ecmascript.org/doku.php?id=harmony:modules