requirejs插件通过paths配置路径映射并用“!”语法调用,如text!templates/header.html;需确保插件已加载,常见插件有text、json等,构建时需在r.js中配置stubmodules以兼容优化。

RequireJS 插件用于扩展模块加载能力,比如加载文本、JSON、CSS,或处理 AMD 模块的预编译逻辑。配置插件的关键在于 路径映射 和 模块 ID 的语法约定,用法则依赖于插件是否支持异步加载与返回值规范。
插件配置:通过 paths 或 packages 注册
RequireJS 本身不内置插件,需显式声明插件模块路径。常用方式是在 require.config 中使用 paths:
- 将插件模块(如
text、json)放在node_modules/requirejs-plugins或自定义目录下 - 在配置中映射插件名到实际路径,例如:
require.config({<br> paths: {<br> text: 'lib/require-text',<br> json: 'lib/require-json'<br> }<br>}); - 若插件是 UMD 模块且含主入口(如
main.js),也可用packages配置,但paths更直观常用
基本用法:模块 ID 中带感叹号(!)调用插件
插件通过 ! 分隔插件名与资源路径,RequireJS 会把右侧部分传给插件的 load 函数处理:
-
define(['text!templates/header.html'], function(template) { ... });→ 加载 HTML 字符串 -
require(['json!config/app.json'], function(conf) { ... });→ 自动解析 JSON 并返回对象 -
define(['css!styles/main.css'], function() { ... });→ 动态插入 CSS 到 head(需插件支持) - 注意:插件模块本身必须已加载(即在
deps或提前require过),否则报错“undefined is not a function”
常见插件示例与注意事项
官方推荐插件库 requirejs-plugins 提供 text、json、domReady 等。使用时需注意:
-
text插件默认只支持同域请求;跨域需配合服务端 CORS 或改用构建时内联 -
json插件本质是text+JSON.parse,文件后缀建议为.json,且内容需严格合法 - 自定义插件需导出符合 AMD 插件接口的对象,至少包含
load方法,接收name、req、load、config四个参数 - 插件加载的资源不会参与 RequireJS 的缓存版本控制(如
urlArgs),需手动加时间戳或 hash 处理缓存问题
构建兼容性:r.js 打包时需特殊配置
使用 r.js 优化器合并代码时,插件资源默认不会被内联,需显式启用插件优化支持:
- 在
build.js中添加:modules: [{<br> name: 'main',<br> include: ['text', 'json']<br>}],<br>stubModules: ['text', 'json'] -
stubModules告诉 r.js 把插件代码留空(运行时加载),避免打包进 bundle;若希望资源内联,需用inlineText或自定义插件构建逻辑 - 未配置时,
text!xxx类模块可能被忽略或导致运行时报错“Module name has not been loaded yet”
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











