sea.js 模块加载器 —— seajs 前端开发解决方案。 项目地址

介绍

主要是受够了市面上的各种包管理工具,干个屁大点事儿就得写一堆配置!还有,我也不知道国内现在做技术的是什么风气,就喜欢把 API 文档写得云里雾里的,能愣是把一段中文说得像是从英文翻译过来的。聊点框架,设计模式的能说得跟玄学似的,感觉不会再爱了。。

其中有个最让我印象深刻的博客,说 xxx 框架底层使用当前性能最高的 Vanilla 编写,哥当时就不淡定了,Vanilla?卧槽,这是个啥玩意?瞬间感觉自己文化水平太低,于是百度了半天。。Vanilla 这货翻译过来就是原生 js!CNM!

最后再吐槽一下 seajs 官方推荐的包管理工具,spm,现在好像下架了,叫什么蚂蚁脚手架(哥翻译的)。作为 seajs 的亲爹,每个模块的依赖竟然还得手动地去配置文件里一个个地写,给自动分析下依赖会死吗?其它包管理工具就算了,你作为亲爸爸,你生成的那种目录结构,有没有考虑过洁癖症的感受?

ok,吐槽完毕!(一般,要发布个新东西之前首先要做的就是先喷一下老的,这是礼节!)

本插件适合使用 seajs 开发的团队,随着项目的积累,可能生产了很多通用模块,每次开干都得各种拷贝,但这个过程肯定不是轻松+愉快的。如果所有模块你都一次性拷贝过来的那当我没说,但强迫症患会觉得某些插件我没都用上为什么都要拷过来?它会直接导致项目中的 js 文件太多,结构混乱。而且如果插件更新了,你是不是还得去拷?这显然不科学!更蛋疼的情况:

比如你要使用插件 a,但插件 a 依赖于插件 b,插件 b 又特么地依赖于插件 c。。你能记得住?而且某些插件可能是动态依赖的,直接运行不会报错,相当容易造成依赖缺失。

本插件干的事情就是一键检索项目中所有使用到的通用模块,自动下载模块的依赖,模块的依赖的依赖。。好了,不废话了,进入正题:

一、搭建静态资源仓库

  1. 创建一个静态仓库(局域网/远端)
  2. 创建根目录”libs”,并将所有插件移到里面,当然不要忘了基础模块:sea.js
    /libs
    /js 存放 js 插件,sea.js 也在里面哦
    /css *存放插件依赖的 css
    /imgs \
    存放插件依赖的图片
  3. 修改仓库内所有插件的依赖地址,全部改成相对地址(先辛苦下,一劳永逸的事情嘛)。
    如:libs/js 目录下有个插件a.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
define(function(require, exports, module) {
//这行代码主要的作用是通过sea.js的路径获取到当前项目的lib地址,以便于引用其它静态资源
var assetsUrl = module.uri
assetsUrl = assetsUrl.substring(0, assetsUrl.lastIndexOf('/js/')) + '/'
//模块a依赖模块b,require参数直接"b"就好了,不用写路径
//因为sea.js和a.js,b.js都在同一个目录(/js)下面
var b = require('b')
//use依赖同理。。
seajs.use('seajs-css', function() {
//模块a依赖libs/css/a.css
seajs.use(assetsUrl + 'css/a.css')
})
//模块a还依赖libs/img/a.png
var img = document.createElement('img')
img.src = assetsUrl + 'img/a.png'
//总之,依赖js模块直接写js文件名,依赖其它静态资源就是assetsUrl+文件名
})

其实如果你完成了静态资源仓库的搭建,并且仓库是在远端(比如 oss/cdn),其实你已经可以轻松愉快地去使用线上插件了
你只需要将页面中引用 sea.js 的路径全部改成线上路径即可。但缺点是你得保证该静态资源仓库长期可用,并且需求方能
够接受页面中存在其它站点的流量

二、相关路径配置

假设当前你的项目目录为:

*/webapp
    /js *业务相关js代码
    /img
    ....
  1. 修改页面中 sea.js 的引用路径
1
<script src="/libs/js/sea.js" id="seajsnode"></script>
  1. 修改 webapp/js 中的代码依赖路径,如,webapp/js/index.js:
1
2
3
4
5
6
define(function(require, exports, module) {
//依赖通用模块"seajs-utils.js"
var utils = require('seajs-utils')
//依赖业务模块"banner.js"
var banner = require('/js/banner')
})

其实这一步对于熟悉 seajs 依赖路径的童鞋来说都是废话,大家可以完全根据自己的喜好来。

三、安装+配置 sealoader

  1. 执行如下 shell 命令安装 sealoader,全局安装!
1
npm install sealoader -g
  1. 打开配置文件:sealoaderConfig.js
1
sealoader -config

配置参考如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
//需要加载依赖的js目录/js文件 运行sealoader指令将会对此目录下的所有js文件进行依赖模块下载(相对命令行的启动目录) 默认:"./js"
"jsPath":"",
//线上模块仓库地址 比如模块a的地址是:http://xxx.xxx.com/libs/js/a.js 那onlinePath须为"http://xxx.xxx.com"
"onlinePath":"",
//后缀路径映射
//如果不写则默认目录和后缀名一致 就像a.js如果在/libs/js,目录下,那么js文件就无须配置后缀路径映射
//比如:要加载通用模块a.js,但sealoader只知道模块都在/libs文件夹里,但不知道a.js在libs的具体哪个文件夹里
// 如果extensionToPath没有对js的文件后缀进行配置,那sealoader就会默认a.js是在/libs/js文件夹里
// 如果extensionToPath中有js:'myJs',那sealoader就会去/libs/myJs中去加载a.js
"extensionToPath":{
// 示例:
// "flash":"swf",
// "imgs":["gif","png"]
},
//其它非js依赖配置
//js模块依赖sealoader可以通过源码解析得出,但一些其他的资源文件,比如图片,css还是需要去手工配置一下的
"otherDeps":{
//示例:
//"a":"a.png",
//"b":["b.css","b.png"],
//"c":["js/c.png"] 这么写则代表sealoader加载c.png会从/libs/js/中去取
},
//其它依赖分析关键字,默认:["require","seajs.use"]
//注意:如果目标js为压缩版本,请在压缩设置中把otherDepKey中的关键字排除
"otherDepKey":[]
}

四、API 参数

  1. Null:无参数则表示获取 sealoaderConfig.jsPath 中所有 js 的依赖
1
sealoader
  1. jsPath:获取指定目录下的所有 js 依赖/获取指定 js 的依赖(相对命令行的启动目录),如:
1
sealoader ./js
1
sealoader ./js/index.js
1
2
//单个js文件可不写全路径,会从sealoaderConfig.jsPath中读取
sealoader index.js
  1. -nocache:默认会优先从缓存中加载模块,此参数可强制获取最新模块
1
sealoader -nocache
1
sealoader index.js -nocache
  1. -showdeps:在加载完成某 js 所有依赖之后输出其完整依赖关系
1
sealoader -showdeps
  1. -online:单独加载某线上资源(及其依赖)
1
2
//js文件可省略后缀 代表加载线上模块xxx.js 只要写文件名就好
sealoader xxx -online
1
2
//代表加载线上图片xxx.png
sealoader xxx.png -online
  1. -config:打开配置文件:sealoaderConfig.js
1
sealoader -config
  1. -h:获取 sealoader 帮助
1
sealoader -h
  1. -v:获取 sealoader 版本号+检测更新(目前为公测版会经常更新,请多关注)
1
sealoader -v

五、附录

贡献一份基于本人的线上前端插件仓库配置(sealoaderConfig.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
(function(){
return {
"jsPath":"./js",
"onlinePath":"http://awei.oss-cn-shenzhen.aliyuncs.com",
"extensionToPath":{
"flash":"swf",
"imgs":["gif","png"]
},
"otherDeps":{
"seajs-waiting":"seajs-waiting-loading.gif",
"seajs-validate":[
"seajs-validate.css",
"seajs-validate-pop.png",
"seajs-validate-pop-square.png"
],
"seajs-autoPage":"seajs-autoPage-loading.gif",
"seajs-modal-common":"PIE.htc",
"seajs-common-tip":[
"seajs-common-tip-success.png",
"seajs-common-tip-fail.png"
],
"seajs-passwordWidget":[
"seajs-passwordWidget-del.png",
"seajs-passwordWidget.css",
"seajs-passwordWidget.html"
],
"seajs-upload":"seajs-upload-loading.gif",
"seajs-uploadImgs":"seajs-uploadImgs-loading.gif",
"seajs-topTip":"seajs-topTip.css",
"seajs-gritter":"jquery.gritter.css",
"seajs-calendar":"calendar.css",
"seajs-utils":"ZeroClipboard.swf"
},
"otherDepKey":"utils.use"
}
})()

点我进入插件页

六、更新日志:

2016.04.07:
新增 api:-online
新增配置项:otherDepKey
新增检测更新
完善消息提示
忽略非 seajs 文件的依赖分析
忽略空文件
增加获取远端文件的超时处理

2.0.4(2016.04.08):
优化缓存机制,极大地提升模块加载速度

2.0.6(2016.04.14)
完善进度提示
修复依赖完整js名(含后缀)导致otherDeps不加载
修复加载线上模块不加载其依赖的bug(-online)
更新readMe中的附录

2.0.7(2016.04.14)
修复文件加载可能不完整的bug
优化超时处理

 评论