Upgrade to RequireJS 2.0 and almond 0.1

前陣子RequireJS升級到2.0了，所以來記述一下相關的做法。
由更新說明文件 Upgrading to RequireJS 2.0 上可以知道，2.0版最重大的變化就是 shim 這項設定，大大提升引入不支援AMD定義的模組方便性，以下開始講解前篇文章的範例該如何做升級修改。

首先來看 main.js：

require({
  paths: {
    jquery: 'lib/jquery-1.7.2.min',
    underscore: 'lib/underscore-min',
    backbone: 'lib/backbone-min',
    templates: '../templates'
  },
  shim: {
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'lib/jquery.serialize': ['jquery']
  }
}, [
  'app',
  'lib/jquery.serialize'
  ], function(
    App
  ) {
    App.start();
});

原先的 priority 設定被 shim 給取代，且可以直接引入原版不支援AMD的Backbone與Underscore程式檔案，jQuery外掛則可以照此例簡單設定相依性，這樣在App引用 jquery.serialize 時就會先引入 jQuery 並放到Global Namespace。

再來看 app.js：

define([
  'router'
], function(
  Router
) {
  'use strict';
  var App = {};
  App.start = function() {
    App.router = new Router;
    Backbone.history.start();
  };
  return App;
});

基本上沒變，因為現在Backbone在 router.js 裡被引入時會放到Global Namespace，拿掉了之前多餘的Backbone引用。

最後輪到 build.js：

{
    baseUrl: 'javascript',
    name: 'almond',
    include: ['main'],
    insertRequire: ['main'],
    out: 'scripts/script.js',
    paths: {
      jquery: 'lib/jquery-1.7.2.min',
      underscore: 'lib/underscore-min',
      backbone: 'lib/backbone-min',
      templates: '../templates'
    },
    shim: {
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'lib/jquery.serialize': ['jquery']
  }
}

最大的重點就是別忘了把 shim 的設定也加到這裡來。
另外這裡的寫法和前篇處理整個專案資料夾不同，是配合使用 almond.js 來輸出單一打包檔，除了也得更新 almond.js 外，還得加上 insertRequire 設定，詳情請見 almond.js 頁面上的說明。

過往今昔…

過期的商業週刊很好看 - 2010
EchoPic─方便的圖片上傳服務 - 2008

過往今昔…

“Upgrade to RequireJS 2.0 and almond 0.1” 有 1 則迴響