seajs amd 改造打賞

說起來seajs,早些年接觸前端的同學應該都有所了解,經常被我們拿來和requirejs對比,而今,webpack等構建工具盛行,這些加載器的使用逐漸退出了我們的視野。

但是,目前手上就有個在用webpack的項目遇到了一些問題——不能在構建階段拿到或者預期到即將加載的代碼有哪些,換句話說頁面框架的構建與業務代碼是完全分離的,甚至不是同一個團隊寫的。于是想到了早期的模塊化方案,我們知道,webpack支持打包umd、commonjs2、amd等形式的輸出物,但是,在web端我們的選擇只有amd。

團隊在早些年用慣了seajs,也喜歡其小巧,對比了requirejs后,決定還是沿用seajs。于是,就有了讓seajs支持amd風格的改造,最初內部改造,為了方便分享,在官方倉庫fork了一份,但seajs和requirejs類似,上次提交都是很久之前了,甚至seajs的構建腳本都跑不起來,直接改了源碼。

seajs的define本質上和amd已無差異,就是factory參數不是amd形式。話不多說,直接上代碼。

// 先單獨寫一個執行模塊的函數
function execDependencies(mod) {
  var dependencies = (mod && mod.dependencies) || []
  var len = dependencies.length
  var deps = []
  for (var i = 0; i < len; i++) {
    var m = mod.deps[dependencies[i]]
    deps[i] = m && m.exec()
  }
  return deps
}

找到 src/module.js 200 - 202 行,這里就是seajs執行代碼時的factory,我們主動執行所有模塊即可

var exports = isFunction(factory) 
    factory.call(mod.exports = {}, require, mod.exports, mod) :
    factory
// 改造為如下形式,execDependencies 內容如下
var exports = isFunction(factory) ?
    factory.apply(mod.exports = {}, execDependencies(mod)) :
    factory

改造完畢,因為項目內使用的版本包含一些內部需要的其他改造,而為分享fork的官方庫不能構建( 不想折騰官方的seatools ),在dist目錄的sea-debug.js也同步做了修改,方便有需要的小伙伴測試。

示例地址: https://github.com/weizs/seajs-amd

因為內部使用版本已發公網npm,占用了seajs-amd命名空間,此fork僅用作源碼分享,并沒有publish到npm

seajs amd 改造
文章《seajs amd 改造》二維碼
  • 微信打賞
  • 支付寶打賞

已有2條評論

  1. 水果一件代發

    好文章

    2019-06-27 18:47 回復
  2. 今日新鮮事

    文章不錯支持一下,非常喜歡

    2019-06-23 00:38 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖