javascript – requirejs 引用 CSS 的方法

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

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

安裝方法

• 下載後，將 require-css/css.min 放到你的專案路徑。
• 接著設定 requirejs 如

  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

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

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

• 依賴的部分，我的 jqui 會依賴 ‘jq’ 與 ‘css!jqui-css’。

  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 檔。

• 所以當我們這麼使用

  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 相關的外掛