text.js插件
https://github.com/requirejs/text
用于加载文本
// 注意前缀 strip只要body部分的内容 require(["text!/user.html!strip"], function(template) { $(#userinfo).html(template); })
text.js配置
requirejs.config({ config: { // 不要少了这个 text: { onXhr: function(xhr, url){ // 请求之前设置 // 设置请求头 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }, createXhr: function(){ // 请求时设置 }, onXhrComplete: function(xhr, url){ // 请求完成后设置 } } } })
css.js插件
加载样式文件
https://github.com/guybedford/require-css
paths: { "css": "./lib/require/css" } 或者 map: { "*": { "css": "./lib/require/css" } } // 加载 require(["css!/static/css/bootstrap.css"], function () {
加载js依赖的时候同时加载css文件
paths: { "jquery": "./lib/jquery", "css": "./lib/require/css", "bootstrap": "./lib/bootstrap" }, shim: { "bootstrap": [ "jquery", "css!/static/css/bootstrap.css", "css!/static/css/bootstrap-theme.css" ] }, // 加载 require(["bootstrap"], function () { }
i18n插件
支持国际化多语言
https://github.com/requirejs/i18n
调用方式
require(["i18n!./nls/message"], function(i18n){ $("#user").after("<button class='btn btn-primary'>" + i18n.edit + "</button>"); })
目录结构
文件夹名称固定为nls
nls -en -message.js define({ "edit": "Edit" }) -zh -message.js define({ "edit": "编辑" }) -message.js define({ "zh": true, "en": true })
从浏览器中获取语言
navigator.language navigator.userLanguage
配置默认语言
config: { i18n: { locale: "zh" } }
从cookie中获取语言
设置浏览器cookie
$ document.cookie='language=zh_CN' # 中文 $ document.cookie='language=en_US' # 英文
// 从浏览器cookie中获取语言 var language= document.cookie.match(/language=([^;]+)/); var locale = "zh"; if (language){ locale = language[1].split("_")[0]; console.log(locale); } // 修改配置 config: { i18n: { locale: locale } }
r.js打包工具
下载执行
https://github.com/requirejs/r.js
$ node r.js -o bashUrl=js name=app out=built.js
安装执行
$ npm install -g requirejs $ r.js -o bashUrl=js name=app out=built.js
使用配置文件打包
r.js -o app.build.js
app.build.js
({ appDir: "./src", // 要打包的根目录 bashUrl: "./js", // js文件在这个baseUrl下 dir: "./build", // 打包后的输出目录 mainConfigFile: "src/js/require.config.js", // requirejs的配置文件 name: "app" })
多模块打包
app.build.js
({ appDir: "./src", // 要打包的根目录 bashUrl: "./js", // js文件在这个baseUrl下 dir: "./build", // 打包后的输出目录 mainConfigFile: "src/js/require.config.js", // requirejs的配置文件 models: [ { name: "app", // optimize:'uglify' // 压缩方式 "none" include: ["foo/bar/bee"] // 添加一起打包 }, { name: "user", exclude: ["foo/bar/bop"] // 移除不打包 } ] })
插件打包
text
css
npm打包
$ npm init $ npm run-script <command> $ npm run # 简写
"script": { "package": "node r.js -o app.build.js" }
maven+ npm自动打包
frontend-maven-plugin