A tiny Promise based javascript module loader.
非常轻量级,minify 文件大小 2.3KB,gzip 传输大小 1.3KB
支持 AMD 模块,并且 require 的 API 已 Promise 化
定义模块一个 AMD 规范的模块 hello.js:
define([], () => { //在模块内实现一些功能(函数、类、甚至库等), 最后返回 return "hello world"; });
你可以像 requirejs 一样调用 hello.js 模块:
require("hello", hello => { //hello模块的返回值会当参数传入 alert(hello); //调用模块返回的值 });
你也可以用 ES6 的 async/await 方式调用 hello.js 模块:
(async () => { let hello = await require("hello"); alert(hello); })();
如果支持顶层await提案top-level await 可以直接使用:
let hello = await require("hello"); alert(hello);
你可以在定义的 AMD 模块中使用 require
define(async () => { let hello = await require("hello"); //let a = await require("a"); //let b = await require("b"); //多个依赖模块 //let [ hello, a, b ] = await Promise.all([ // require('hello'), require('a'), require('b') //... //]); return hello.toUpperCase(); });
调用非AMD模块时,可以用hook方式解决模块导出问题
//比如加载使用jquery //先将jquery文件放入./lib/jquery.js //然后定义一个hook require.setHook("./lib/jquery", () => { return window.$; }); //再调用模块 require("./lib/jquery", $ => { $("#id").css({ color: red }); });
cwd 工作目录
//当前工作目录 require.cwd = "./assets/js"; //一旦配置了cwd,你可以用@代替工作路径 define(["@/a.js"], a => { //a 来自 ./assets/js/a.js });
default 默认文件
//路径指定的如果是目录,默认指定的目录下的文件名 require.default = "index.js"; //定位到目录 define(["assets/lib/"], lib => { //lib 来自 ./assets/lib/index.js });
tag 缓存版本标签
//模块路径统一加入tag标签 require.tag = "v=1.0.1"; define(["assets/test"], test => { //test 请求路径为 assets/test.js?v=1.0.1 });
除此之外你可以在 html 里引入im.js的 script 标签上进行配置:
<script src="assets/js/im.js" data-cwd="assets/js" data-default="index.js" data-tag="1.0.1" data-main="app.js" ></script> <!-- data-main为配置的入口js文件, 会自动引入执行,相当于: require('app.js'); -->
- 使用unpkg
- 与Preact配合的H5架子 game-spore-preact
- 与react配合?
- 与vue配合?