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

本文由作者鄭海波授權網易云社區發布。

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

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

requirejs的插件體系
requirejs的源碼內部預留了hook，使得你可以創建插件來增強這個模塊系統，并且這個插件可以做到影響到你的OPTIMIZER階段，一些資源可以被處理為標準的AMD模塊。

插件普遍被用來

預編譯

加載非js文本

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

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

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

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

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

優化OPTIMIZER

由于requirejs同時提供工具(npm:requirejs)可以靜態打包優化AMD，剛才的那個text!foo.html會同時被text插件轉換為類似下面的AMD模塊結構

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

return "
早上好
";

});
requirejs的插件其實是一個實現的特定接口的標準AMD模塊，它在定義時與其它業務模塊并無區別。

例如官方text插件的源文件

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

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

})
其中load等接口是插件必須實現的，

對于各個接口描述我就不細究了，大家可以參考官網

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

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

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

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

handlebars 用來加載handlebar的插件

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

實現requirejs-regular的過程
背景

首先我們先理清我們的需求, 與常規的的模板預編譯類似，我們的插件主要為了實現兩個功能。

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

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

依賴系統唯一化, 模板依賴集成進了模塊依賴中

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

實現

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

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

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

即插件會依賴這兩個模塊

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

return{
    load: load,
    write: write
}

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

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接口，傳入參數相當于模塊的內容，我們這里預parse了這段文本內容。即你通過rgl!template.html最終會獲得解析后的AST數據。

其實對于regularjs來講在瀏覽器端有無進行模塊系統層面的預解析并無意義，關鍵是在打包優化階段。這里的buildMap主要是為了保存這段內容用于打包使用。

write 實現write接口主要是為了在打包優化階段改寫相關模塊

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，它必須保證環境中有hogan和text才可以運行. 熟悉requirejs打包過程的同學也知道，除了loader端的配置，我們在build的打包文件也需要一并將這些依賴模塊剔除，因為上線時是不需要這些插件的。所以這將大大增加配置成本，其實解決方案也很簡單，就是使用[webpack]再將其打包成一個standlone的AMD模塊即可，具體可以參考這里的gulpfile。

大功告成

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

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

bower install regularjs-regular --save
save參數是安裝后并寫入到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主目前正在開發的項目在初期就有幾十個模板文件，build成單文件后的運行時開銷還是應該盡量避免.

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

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

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

免費領取驗證碼、內容安全、短信發送、直播點播體驗包及云服務器等套餐

更多網易技術、產品、運營經驗分享請訪問網易云社區。

文章來源： 網易云社區