requirejs 在页面怎么调用

JavaScript06

requirejs 在页面怎么调用,第1张

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

所谓打包就是将多个js文件合并,压缩,为什么需要打包呢,因为js合并之后可以减少前端js引用js的数量和体积,数量少了js加载就相对快一些。为什么会说体积也减小了呢,因为现在流行的打包工具例如webpack在打包的过程中不只是简单的把多个js文件合并成一个文件这么简单,它还会多js进行压缩,例如去掉无效的空格,替换较长的变量名函数名等,最后让你的js文件变得更小。