es6

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

    全站熱搜

    賽拉維‧柯南 發表在 痞客邦 留言(0) 人氣()