sea.js
模块加载器 —— seajs 前端开发解决方案。 项目地址
介绍
主要是受够了市面上的各种包管理工具,干个屁大点事儿就得写一堆配置!还有,我也不知道国内现在做技术的是什么风气,就喜欢把 API 文档写得云里雾里的,能愣是把一段中文说得像是从英文翻译过来的。聊点框架,设计模式的能说得跟玄学似的,感觉不会再爱了。。
其中有个最让我印象深刻的博客,说 xxx 框架底层使用当前性能最高的 Vanilla 编写,哥当时就不淡定了,Vanilla?卧槽,这是个啥玩意?瞬间感觉自己文化水平太低,于是百度了半天。。Vanilla 这货翻译过来就是原生 js!CNM!
最后再吐槽一下 seajs 官方推荐的包管理工具,spm,现在好像下架了,叫什么蚂蚁脚手架(哥翻译的)。作为 seajs 的亲爹,每个模块的依赖竟然还得手动地去配置文件里一个个地写,给自动分析下依赖会死吗?其它包管理工具就算了,你作为亲爸爸,你生成的那种目录结构,有没有考虑过洁癖症的感受?
ok,吐槽完毕!(一般,要发布个新东西之前首先要做的就是先喷一下老的,这是礼节!)
本插件适合使用 seajs 开发的团队,随着项目的积累,可能生产了很多通用模块,每次开干都得各种拷贝,但这个过程肯定不是轻松+愉快的。如果所有模块你都一次性拷贝过来的那当我没说,但强迫症患会觉得某些插件我没都用上为什么都要拷过来?它会直接导致项目中的 js 文件太多,结构混乱。而且如果插件更新了,你是不是还得去拷?这显然不科学!更蛋疼的情况:
比如你要使用插件 a,但插件 a 依赖于插件 b,插件 b 又特么地依赖于插件 c。。你能记得住?而且某些插件可能是动态依赖的,直接运行不会报错,相当容易造成依赖缺失。
本插件干的事情就是一键检索项目中所有使用到的通用模块,自动下载模块的依赖,模块的依赖的依赖。。好了,不废话了,进入正题:
一、搭建静态资源仓库
- 创建一个静态仓库(局域网/远端)
- 创建根目录”libs”,并将所有插件移到里面,当然不要忘了基础模块:sea.js
/libs
/js *存放 js 插件,sea.js 也在里面哦
/css 存放插件依赖的 css
/imgs \存放插件依赖的图片 - 修改仓库内所有插件的依赖地址,全部改成相对地址(先辛苦下,一劳永逸的事情嘛)。
如: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) { var assetsUrl = module.uri assetsUrl = assetsUrl.substring(0, assetsUrl.lastIndexOf('/js/')) + '/' var b = require('b') seajs.use('seajs-css', function() { seajs.use(assetsUrl + 'css/a.css') }) var img = document.createElement('img') img.src = assetsUrl + 'img/a.png' })
|
其实如果你完成了静态资源仓库的搭建,并且仓库是在远端(比如 oss/cdn),其实你已经可以轻松愉快地去使用线上插件了
你只需要将页面中引用 sea.js 的路径全部改成线上路径即可。但缺点是你得保证该静态资源仓库长期可用,并且需求方能
够接受页面中存在其它站点的流量
二、相关路径配置
假设当前你的项目目录为:
*/webapp
/js *业务相关js代码
/img
....
- 修改页面中 sea.js 的引用路径
1
| <script src="/libs/js/sea.js" id="seajsnode"></script>
|
- 修改 webapp/js 中的代码依赖路径,如,webapp/js/index.js:
1 2 3 4 5 6
| define(function(require, exports, module) { var utils = require('seajs-utils') var banner = require('/js/banner') })
|
其实这一步对于熟悉 seajs 依赖路径的童鞋来说都是废话,大家可以完全根据自己的喜好来。
三、安装+配置 sealoader
- 执行如下 shell 命令安装 sealoader,全局安装!
1
| npm install sealoader -g
|
- 打开配置文件: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
| { //需要加载依赖的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 参数
- Null:无参数则表示获取 sealoaderConfig.jsPath 中所有 js 的依赖
- jsPath:获取指定目录下的所有 js 依赖/获取指定 js 的依赖(相对命令行的启动目录),如:
1 2
| //单个js文件可不写全路径,会从sealoaderConfig.jsPath中读取 sealoader index.js
|
- -nocache:默认会优先从缓存中加载模块,此参数可强制获取最新模块
1
| sealoader index.js -nocache
|
- -showdeps:在加载完成某 js 所有依赖之后输出其完整依赖关系
- -online:单独加载某线上资源(及其依赖)
1 2
| //js文件可省略后缀 代表加载线上模块xxx.js 只要写文件名就好 sealoader xxx -online
|
1 2
| //代表加载线上图片xxx.png sealoader xxx.png -online
|
- -config:打开配置文件:sealoaderConfig.js
- -h:获取 sealoader 帮助
- -v:获取 sealoader 版本号+检测更新(目前为公测版会经常更新,请多关注)
五、附录
贡献一份基于本人的线上前端插件仓库配置(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
优化超时处理