RequireJS高階(三) 轉

2022-05-18 15:23:33 字數 1609 閱讀 6498

高階的前面兩篇講述了r.js如何通過命令列把所有的模組壓縮為乙個js檔案或把所有的css壓縮為乙個css檔案。其中包括一些壓縮配置引數的使用。

但以上兩種方式有幾個問題

1、通過命令手動配置壓縮選項顯得很呆板

2、都僅合併為乙個檔案

對於最後只生成乙個檔案的庫來說,這種方式並無不妥。比如jquery,它的工程中小檔案有20多個,打包後只有乙個jquery-1.x.x.js。對於多數實際應用專案來說,可能打包後需要生成多個js檔案。有些是頁面開啟時就要用到的,有些是使用者點選或輸入時按需載入的。

r.js有另外一種方式來合併壓縮,即通過乙個配置檔案(如build.js)。配置檔案內部採用前端工程師非常熟悉json格式。這樣當專案開發目錄固定後,配置檔案也相應固定。通過配置檔案就很好的隔離了開發環境及上線環境。

這次我們建立的目錄中包含所有前端資源,js,css,。

其中有兩個頁面page1.html,page2.html。這兩個頁面分別使用page1.js和page2.js。

build.js如下12

3456

78910

1112

1314

1516

(,

modules: [

,

]

})

進入命令列輸入如下命令

會發現在和r6同級的目錄生成了r6-built目錄

該目錄包含於r6一樣的層級結構,這時訪問該目錄中的page1.html,page2.html。

這時的page1.js和page2.js就是其它模組檔案的合併。另外在r6-built中其它的模組檔案也被壓縮了。

在build.js中可以配置很多其它引數,可以在這個示例檔案中找到更多配置選項。這裡不一一枚舉。

總結:通過配置檔案方式可以實現更加強大,靈活的合併工作。可以生成多個合併檔案,包括不同頁面的js,css。

r6.zip

RequireJS入門(三)轉

這篇來寫乙個具有依賴的事件模組event。event提供三個方法bind unbind trigger來管理dom元素事件。event依賴於cache模組,cache模組類似於jquery的 data方法。提供了set get remove等方法用來管理存放在dom元素上的資料。示例實現功能 為頁面...

RequireJS入門(二) 轉

為演示方便這裡僅實現常用的三種選擇器id,classname,attribute。requirejs使用define來定義模組。新建目錄結構如下 這次新建了乙個子目錄js,把main.js和selctor.js放入其中,require.js仍然和index.html在同一級目錄。html 如下12 ...

基於requirejs的vue2專案 三

這裡是打包篇 使用的是requirejs的r.js進行打包 思路是,通過entrance.js裡面的require.config進行專案的初打包 因為router.js和store.js裡面的引用是動態生成的,所以r.js無法對其進行處理,這裡我們用到了nodejs來進行檔案整合 具體看 node2...