javascript – requirejs 引用 CSS 的方法

2015-09-09 / JSN / 0 Comments / 1,196 次瀏覽

使用 require.js 可以載入 js 檔，但如果要載入 css 的話，就必須透過 require-css 才有辦法載入。

安裝方法

• 下載後，將 require-css/css.min 放到你的專案路徑。
• 接著設定 requirejs 如
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  requirejs.config({       //避免緩存     urlArgs: "bust=" +  (new Date()).getTime(),          //路徑或別名     paths: {         'jq' : 'plugin/JS/jquery-1.11.1.min', //jQuery 核心         'jqui' : 'plugin/JS/jquery-ui-1.11.2/jquery-ui.min', //UI 套件，但是依賴 jQuery，所以要想辦法先載入 jQuery 核心。         'jqui-css' : 'plugin/JS/jquery-ui-1.11.2/jquery-ui.min', // UI 的樣式檔     },     //初始化模組     map : {         '*': {             'css': 'plugin/JS/require-css/css.min' //填寫我們下載後放置的檔案路徑         }     },     //依賴     shim: {         'jqui' : {deps: ['jq', 'css!jqui-css']},     } })

  
   
• 中間這段 map 就是當載入之前，務必要優先載入的外掛，例如我們這次的 require-css
  
  1 2 3 4 5 6 7

  map : {         '*': {             'css': 'plugin/JS/require-css/css.min'         }     },

  
  我們自訂一個叫做  ‘css’ 的辨識詞，之後只要在前綴的文字打上 『css!』，系統就會知道我們要載入 CSS 文件。
  ‘plugin/JS/require-css/css.min’ 是引用我檔案放置的位置。
• 依賴的部分，我的 jqui 會依賴 ‘jq’ 與 ‘css!jqui-css’。
  
  1 2 3 4 5

  shim: {         'jqui' : {deps: ['jq', 'css!jqui-css']},     }

  
  ‘jq’ 會從上方 path 設定中得知，要先引用 plugin/JS/jquery-1.11.1.min.js。
  ‘css!jqui-css’ 因為有 『css!』作為前綴，所以系統會被知道要使用的是 css 檔而不是 js 檔。後方的 ‘jqui-css’ 也是參考了 path 設定，要引用 plugin/JS/jquery-1.11.1.min.css 檔。
• 所以當我們這麼使用
  
  1 2 3 4 5

  requirejs([     'jqui' ]);

  
  因為依賴已經設定的關係，我們除了加載 plugin/JS/jquery-ui-1.11.2/jquery-ui.min.js 之外，在這之前還會分別加載 plugin/JS/jquery-1.11.1.min.js 與 plugin/JS/jquery-ui-1.11.2/jquery-ui.min.css。

目前這樣看來很分散，程式碼並不是很漂亮，邏輯也跳躍，覺得不是個好方法，但是是目前解決的方式吧！相關資料可以參考

• javascript – RequireJS – 非常重要的依賴性指定
• javascript – RequireJS – 紀錄簡單的安裝方式

參考資料
require.js 相關的外掛