requirejs 在页面怎么调用
发布网友
发布时间:2022-04-24 15:22
我来回答
共1个回答
热心网友
时间:2022-04-21 05:43
1 所有js文件打包到1个文件
2 在1的基础上可以给js按照模块分组,支持多个模块在1个js文件中
BUT 都是最终归结为1个js文件。。。。。。
但是这不是我想要的,我就想要一个页面相关的js打包成一个js文件包,每个页面都有自己的js文件包
方法很简单 基于grunt+grunt-contrib-requirejs
代码如下 复制代码
// r.js 打包 准备
var files = grunt.file.expand('js/app/*/main.js'); //读取要打包的js入口 一般都为 main的js
var requirejsOptions = {}; //用来存储 打包配置的对象
//遍历文件
files.forEach(function(file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 2]; //获取目录名称,因为这里的文件名都是main的js
requirejsOptions[filename] = {
options: {
baseUrl: "js/",
paths: {
"text": 'lib/text',
"jquery": 'lib/jquery',
"backbone": 'lib/backbone',
"underscore": 'lib/underscore',
"Highcharts": 'lib/highcharts/highcharts',
"select2": 'lib/select2/select2',
"moment": 'lib/moment',
"jquery-ui": 'lib/jquery-ui/jquery-ui',
"jq(www.111cn.net)uery.cookie": 'lib/jquery.cookie',
"validate": 'lib/jquery.validate',
"metadata": 'lib/jquery.metadata',
"jsplumb": "lib/jquery.jsPlumb",
"qtip": 'lib/qtip/jquery.qtip',
"nicescroll": "lib/jquery.nicescroll",
"Htheme": 'lib/highcharts/theme',
'jquery.mousewheel': 'lib/jquery.mousewheel'
},
optimizeAllPluginResources: true,
name: 'app/' + filename + '/main',
out: 'js/appbuild/' + filename + '/main.js'
}
};
});
//
通过观察我们可以发现,配置和r.js 的build.js 是一致的,然后按照文件名存贮到对象中,
对与和grunt的配置则简单多了
代码如下 复制代码
//*****省略其他代码
requirejs: requirejsOptions
});
// Default task(s).
grunt.registerTask('dev', [
'compass:force',
'connect:server',
'watch'
]);
grunt.registerTask('dist', [
'compass:force'
]);
grunt.registerTask('js', ['requirejs']);
from:http://www.111cn.net/wy/js-ajax/62352.htm