摘要：一句化即它是插件的插件，作者事后才發(fā)現(xiàn)有這么一個插件繞了不少彎路。這里的主要是為了保存這段內(nèi)容用于打包使用。免費領(lǐng)取驗證碼內(nèi)容安全短信發(fā)送直播點播體驗包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū)

本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。

前言
我這里就不介紹requirejs了， 簡而言之： requirejs是支持AMD規(guī)范的模塊加載器， 事實上它也是AMD的最直接推動者。

現(xiàn)在可供挑選的開源模塊解決方案很多，比如component、cjs+browserify、umd等等，但是無疑類似requirejs這類加載系統(tǒng)是現(xiàn)在最成熟和可靠的解決方案，所以regularjs第一步就是提供對requirejs的插件支持。

requirejs的插件體系
requirejs的源碼內(nèi)部預(yù)留了hook，使得你可以創(chuàng)建插件來增強這個模塊系統(tǒng)，并且這個插件可以做到影響到你的OPTIMIZER階段，一些資源可以被處理為標(biāo)準(zhǔn)的AMD模塊。

插件普遍被用來

預(yù)編譯

加載非js文本

lint 或 test 后置或前置的操作 等等

example 比如它本身是不支持加載文本信息的，但是你可以通過text!插件來加載。

require(["text!foo.html", "jquery"], function(foo, $){

$("#anchor").html(foo);

})
需要注意的是由于文本無法用script標(biāo)簽進(jìn)行加載，所以text內(nèi)部是通過XHR來載入的，即它會受到同源策略的影響。

優(yōu)化OPTIMIZER

由于requirejs同時提供工具(npm:requirejs)可以靜態(tài)打包優(yōu)化AMD，剛才的那個text!foo.html會同時被text插件轉(zhuǎn)換為類似下面的AMD模塊結(jié)構(gòu)

define("text!foo.html",[],function () {

return "
早上好
";

});
requirejs的插件其實是一個實現(xiàn)的特定接口的標(biāo)準(zhǔn)AMD模塊，它在定義時與其它業(yè)務(wù)模塊并無區(qū)別。

例如官方text插件的源文件

define(["module"], function (module) { "use strict"; var text = {

    load: function(){}
    ....
}    return text

})
其中l(wèi)oad等接口是插件必須實現(xiàn)的，

對于各個接口描述我就不細(xì)究了，大家可以參考官網(wǎng)

順便列舉一些有用的requirejs插件

text插件(最常用插件) 如果你的文本內(nèi)容無需在打包優(yōu)化階段做處理，幾乎都可以使用這個插件來完成加載

json插件 比樓上多做了一步JSON.parse.

amd-loader(好東西): 注意不要requirejs本身弄混了，因為requirejs本身不是基于xhr的，這個插件主要是提供完善的xhr支持來加載文本內(nèi)容。一句化即它是[插件的loader插件]，作者事后才發(fā)現(xiàn)有這么一個插件...繞了不少彎路。具體例子可以查看es6

handlebars 用來加載handlebar的插件

其實由于amd等模塊系統(tǒng)占據(jù)了開發(fā)中的模塊入口這一環(huán)，其實在開發(fā)中可以有無限的可能性，這也是常規(guī)大公司都會自造一個輪子來最優(yōu)配置的緣由之一，事實上requirejs目前的插件系統(tǒng)已經(jīng)有足夠的靈活性來定制自己的策略。

實現(xiàn)requirejs-regular的過程
背景

首先我們先理清我們的需求, 與常規(guī)的的模板預(yù)編譯類似，我們的插件主要為了實現(xiàn)兩個功能。

在開發(fā)階段，我們希望能加載js文件一樣，加載我們的模板文件，這帶來的幾個好處

這使得我們不必將模板零散的填充到頁面的script 或 textarea標(biāo)簽中

依賴系統(tǒng)唯一化, 模板依賴集成進(jìn)了模塊依賴中

在優(yōu)化階段(即requirejs提供的OPTIMIZER的上線打包功能)，我們的模板字符串可以被預(yù)處理為序列化的AST對象，這樣就不會發(fā)生瀏覽器端的解析，效率更高。

實現(xiàn)

一個插件模塊會同時跑在瀏覽器端(開發(fā)環(huán)境)和node端(為線上或測試環(huán)境的打包優(yōu)化工具)，所以你的插件模塊必須可以同時跑在瀏覽器端和node端，這個幾乎是整個開發(fā)環(huán)境最麻煩的一部分

regular.js的單文件雖然是umd模塊可以支持amd環(huán)境，但是由于依賴的dom。所以首先要將parser部分(不依賴dom)打成一個AMD模塊，由于regularjs本身就是基于commonjs的模塊構(gòu)建，將其中一部分打成AMD模塊是分分鐘的事情，這里我們使用webpack來打包成regular-parser.js，簡單起見我們隨regularjs模塊一同發(fā)布到bower上

我們還要解決模板的加載問題，插件內(nèi)部的加載問題也要手動解決，即你至少要實現(xiàn)loader接口和get接口。這里我們完全可以偷個懶，直接使用!text插件。

即插件會依賴這兩個模塊

define(["text", "regular-parser"], function(text, parser){ //blalalalala...

return{
    load: load,
    write: write
}

})
然后我們只需要實現(xiàn)兩個接口:

load

var buildMap = {};function load(name, req, onLoad, config){

text.load(name, req, function(data,r){
    onLoad(
      (buildMap[name] = parser.parse(data, false))
    );
}, config);

}
這里直接使用了text插件的純文本加載，需要注意的是這個onLoad接口，傳入?yún)?shù)相當(dāng)于模塊的內(nèi)容，我們這里預(yù)parse了這段文本內(nèi)容。即你通過rgl!template.html最終會獲得解析后的AST數(shù)據(jù)。

其實對于regularjs來講在瀏覽器端有無進(jìn)行模塊系統(tǒng)層面的預(yù)解析并無意義，關(guān)鍵是在打包優(yōu)化階段。這里的buildMap主要是為了保存這段內(nèi)容用于打包使用。

write 實現(xiàn)write接口主要是為了在打包優(yōu)化階段改寫相關(guān)模塊

var tpl = function(str, data){ return str.replace(/{{(w+)}}/g, function(all, name){ return data[name] || ""

})

}var template ="define("{{pn}}!{{mn}}",function(){ return {{ast}} });n";function write(pn, mn, writeModule){ if(buildMap[mn]){

   writeModule(
       tpl(template,{
           pn: pn,
           mn: mn,
           ast: parser.parse(buildMap[mn])
       })
   )

}
}
此時這個插件必須依賴于兩個模塊，即必須同時保證text和regular-parser模塊同時存在，類似的方案可以查看hogan，它必須保證環(huán)境中有hogan和text才可以運行. 熟悉requirejs打包過程的同學(xué)也知道，除了loader端的配置，我們在build的打包文件也需要一并將這些依賴模塊剔除，因為上線時是不需要這些插件的。所以這將大大增加配置成本，其實解決方案也很簡單，就是使用[webpack]再將其打包成一個standlone的AMD模塊即可，具體可以參考這里的gulpfile。

大功告成

使用就非常簡單了，和你使用requirejs-text差不多,

1.首先下載rgl.js，最簡單的就是bower安裝

bower install regularjs-regular --save
save參數(shù)是安裝后并寫入到bower.json中，這個和npm一致

2.配置

require.config({ paths : { "rgl": "../../bower_components/regularjs-regular/rgl"，

   // 同時載入我們的regularjs來使用這些模板       "regularjs": "../../bower_components/regularjs/dist/regular"

}
});
3.使用

require(["rgl!./foo.html", "regularjs"], function( tpl, Regular){ var Foo = Regular.extend({

  template: tpl
})    new Foo({}).$inject("#app")

});
4.打包

模板文件

{{message}}

define("rgl!foo.html",function(){return [{"type":"element","tag":"h2","attrs":[],"children":[{"type":"expression","body":"_c_._sg_("message", _d_["message"])","constant":false,"setbody":"_c_._ss_("message",_p_,_d_, "=")"}]}] });
即上線后就不會有parse了，比如PO主目前正在開發(fā)的項目在初期就有幾十個模板文件，build成單文件后的運行時開銷還是應(yīng)該盡量避免.

tip：build.js記得通過stubModules配置項目刪除掉這個插件模塊，具體看demo的build.js。

對于NEJ的使用者
NEJ的新模塊系統(tǒng)支持上述類似的regular模板加載了

網(wǎng)易杭州的同事，事實上你已經(jīng)可以在NEJ的新模塊系統(tǒng)中（完全兼容老版本）通過regular!path/to/template.html的方式來加載你的regular模板了，打包之后模板將會被預(yù)解析，同時新版NEJ也支持text!加載純文本內(nèi)容, 詳詢@飛鍋。新版本的加載系統(tǒng)，支持類似AMD的注入寫法，并且兼容老版本的模塊寫法，親測好用哈。

免費領(lǐng)取驗證碼、內(nèi)容安全、短信發(fā)送、直播點播體驗包及云服務(wù)器等套餐

更多網(wǎng)易技術(shù)、產(chǎn)品、運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。

文章來源： 網(wǎng)易云社區(qū)