代码拉取完成,页面将自动刷新
基于AMD(requirejs)机制,加载后现代的 javascript 近亲文件(如 coffee-script 、 react 、 ecmascript6 等),实时编译(转换)为 js,并将结果缓存在 HTML5 的 localStorage,并基于 AMD 机制进行加载。
取名 any 包含了 anytime 和 anything 的含义。
目前分为3个分支:
3个分支的源代码部分都是一样的,唯一的区别是bower.json中 main
和 dependencies
的不同。
bower install require-any
// or 你只使用es6
bower install require-any#babel
// or 你只使用coffee
bower install require-any#coffee
核心的文件 require-any.js
实现如下内容:
requirejs([any!test/Error.jsx])
。本类库预设的实现了两个实时翻译器( XHR 加载,并将翻译结果缓存在 LocalStorage ):
特别说明:由于coffee-react-transform没有指定bower.json文件,所以这个转译器的源代码会打包在coffee分支的代码中。
基本的流程:
安装:
bower install require-any --save
修改针对require.js的配置:
var rjsConfig = {
paths : {
'react' : 'bower_components/react/react',
'react-dom' : 'bower_components/react/react-dom',
'babel-standalone' : 'bower_components/babel-standalone/babel.min',
'coffee-script' : 'bower_components/coffee-script/extras/coffee-script',
// 'coffee-react' : 'src/transpiler/coffee-react',
// 指定加载的协议,你可以指定任意名称
'any' : 'dist/require-any-all.min',
// 下面转译器部分,如果你确定使用的名称为:transpiler-coffee 或 transpiler-babel,则不需要修改,已经包含在require-any-all的文件中。
// coffee-script 对译器
// 'transpiler-coffee': 'dist/require-any-all.min',
// babel 对译器
// 'transpiler-babel' : 'dist/require-any-all.min',
// 对于指定路径的模块,也可以使用any!test2.es6的方式来加载,只能说AMD的规范真的做的很好。
'test2' : 'test/Test2'
},
// 注意,请在config下面注册配置,这是AMD规范的机制。
//
config: {
any: {
// 指定缓存存储的空间
cacheKey: 'my-cache',
// 是否编译模式,如果是编译模式,则直接加载这个模块的js文件
// any!test.jsx,当build = true,则会去加载 test.js 文件
build: false,
// 是否显示调试的信息
// 调试改为支持等级的设置,> 1 的话,每次加载模块的名称,和url都会输出。
debug: 2,
// 声明相关的,插件
plugins: {
coffee: 'transpiler-coffee',
es6: 'transpiler-babel'
},
// 增加一个模式的配置的设置
// 模式匹配,最终还是去匹配文件后缀,来找到相关的编译参数。
patterns: [
{ regex: '.es6$', mode: 'i', onMatch: function(matches) {}, plugin: 'transpiler-babel' }
],
// 后缀文件名的别名,指定用哪个插件来进行处理
ext: {
cjsx: 'coffee',
jsx: 'es6'
},
// 后缀转换(编译)时的参数,以后缀名为指向。
// 如果这里指定了jsx,则优先取jsx的配置。
// 如果没指定jsx,则会加载es6的配置。
options: {
es6: {
plugins: [
"transform-es2015-modules-amd",
"transform-es2015-block-scoping",
"transform-class-properties",
"transform-es2015-computed-properties"
]
}
}
}
}
};
rjsConfig.urlArgs = "version=" + (new Date()).valueOf();
requirejs.config(rjsConfig);
可以参考 index.html
requirejs(['any!test/hello.coffee', 'any!test/Table.cjsx', 'react', 'react-dom', 'any!test/Test.jsx', 'any!test/Error.jsx'], function(hello, Table, React, ReactDOM, Test, Error) {
ReactDOM.render(React.createElement(Table), document.getElementById('test1'));
ReactDOM.render(React.createElement(Test), document.getElementById('test2'));
});
上述中,如果 config.any.build
为 true
的话,所有any前缀请求都会去掉相应的后缀文件名,即加载这个模块的js文件。如:test/hello.js。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型