首页 > 代码库 > requirejs 多页面，多入口js文件打包总结
requirejs 多页面，多入口js文件打包总结
需要明确以下几点：
1.本地前端调试代码肯定是调用原始的路径以及代码，但是线上运行的肯定是通过打包后的另一个路径，这儿就是生成的dist文件夹了。
2.requirejs的引入，线上跟线下的路径怎么控制？我们是这样控制的，代码如下：
<script src="${resource}/js/base/require.js" data-main="${resource}/js/accountMain"></script>
这个${resource}是服务端控制传递到页面中的，在本地调试这个${resource}的值就是/resource/v1/；那么到了线上这个值就是/dist/v1/了。所以这个js线上跟线下的配合就完成了。本地调试调用的是/resource/v1/下面的资源，在线上就是/dist/v1/下的资源，当然这个v1其实是多余的，当时主要是为了做版本发布添加的版本号。
下面我们就一步一步来讲解下如何把resource/v1/js/下的入口文件都打包。
首先看一下我的所有入口文件在哪儿，如图所示：
这些js就是在resource/v1/js/下面。
入口现在有11个js文件，都需要把所引入的模块都打包到各自的入口js中。
第一步，我copy原始资源中的fonts,images,css以及js中base下的js，其中base下的js文件主要是基本的库，包括requirejs库等。复制到dist文件夹下。
复制的作用是，在线上我也需要dist下的fonts,images,css。
copy: { /* main: { expand: true, cwd: ‘src‘, src: ‘**‘, dest: ‘dist/‘, }, */ main:{ files:[ {expand: true,cwd: ‘resources/v1/css/‘,src: ‘**‘,dest:‘dist/v1/css/‘}, {expand: true,cwd: ‘resources/v1/fonts/‘,src: ‘**‘,dest:‘dist/v1/fonts/‘}, {expand: true,cwd: ‘resources/v1/images/‘,src: ‘**‘,dest:‘dist/v1/images/‘}, {expand: true,cwd: ‘resources/v1/js/base/‘,src: ‘**‘,dest:‘dist/v1/js/base/‘} ] } }
第二步，通过grunt-contrib-requirejs打包入口文件。配置文件如下：
// r.js 打包准备 var files = grunt.file.expand(‘resources/v1/js/*.js‘); var requirejsOptions = {}; //用来存储 打包配置的对象 //遍历文件 files.forEach(function(file,index,array) { var name = file.substring(file.lastIndexOf(‘/‘) + 1); var reqname = name.replace(/\.js$/,‘‘); console.log(name); var filename = ‘requirejs‘ + index; requirejsOptions[filename] = { options: { baseUrl: "resources/v1/js", paths:{ "jquery":‘base/jquery-1.11.3.min‘, ‘vue‘:‘base/vue.min‘, "vuedraggable":‘base/vuedraggable‘, ‘bootstrap‘:‘base/bootstrap.min‘, "sortablejs":‘base/Sortable‘, "basicLib":‘widgets/basicLib‘, ‘msg‘:‘widgets/msg‘, ‘baseUrl‘:‘widgets/baseUrl‘, ‘common‘:‘widgets/common‘, "ajaxfileupload":‘widgets/ajaxfileupload‘, ‘document‘:‘widgets/document‘, "comp":‘widgets/comp‘, ‘header‘:‘module/header‘, ‘accountCenter‘:‘view/accountCenter‘, ‘docking‘:‘view/docking‘, ‘templateUploadCtr‘:‘view/templateUploadCtr‘ }, shim:{ ‘vue‘:{ exports:‘vue‘ }, ‘basicLib‘:[‘jquery‘], ‘bootstrap‘:[‘jquery‘], ‘ajaxfileupload‘:[‘jquery‘], ‘sortablejs‘:[‘vue‘] }, optimizeAllPluginResources: true, name: reqname, out: ‘dist/v1/js/‘ + name } }; });
接着初始化配置以及加载注册任务
grunt.initConfig({ requirejs: requirejsOptions})grunt.loadNpmTasks(‘grunt-contrib-requirejs‘);grunt.registerTask(‘default‘, [‘requirejs‘]);
由于我的代码中有es6语法，所以合并后把其中的es6语法转化成es5的；再后面在压缩去掉注释什么的。
总的配置代码如下：
module.exports = function(grunt) { // r.js 打包准备 var files = grunt.file.expand(‘resources/v1/js/*.js‘); var requirejsOptions = {}; //用来存储 打包配置的对象 //遍历文件 files.forEach(function(file,index,array) { var name = file.substring(file.lastIndexOf(‘/‘) + 1); var reqname = name.replace(/\.js$/,‘‘); console.log(name); var filename = ‘requirejs‘ + index; requirejsOptions[filename] = { options: { baseUrl: "resources/v1/js", paths:{ "jquery":‘base/jquery-1.11.3.min‘, ‘vue‘:‘base/vue.min‘, "vuedraggable":‘base/vuedraggable‘, ‘bootstrap‘:‘base/bootstrap.min‘, "sortablejs":‘base/Sortable‘, "basicLib":‘widgets/basicLib‘, ‘msg‘:‘widgets/msg‘, ‘baseUrl‘:‘widgets/baseUrl‘, ‘common‘:‘widgets/common‘, "ajaxfileupload":‘widgets/ajaxfileupload‘, ‘document‘:‘widgets/document‘, "comp":‘widgets/comp‘, ‘header‘:‘module/header‘, ‘accountCenter‘:‘view/accountCenter‘, ‘docking‘:‘view/docking‘, ‘templateUploadCtr‘:‘view/templateUploadCtr‘ }, shim:{ ‘vue‘:{ exports:‘vue‘ }, ‘basicLib‘:[‘jquery‘], ‘bootstrap‘:[‘jquery‘], ‘ajaxfileupload‘:[‘jquery‘], ‘sortablejs‘:[‘vue‘] }, optimizeAllPluginResources: true, name: reqname, out: ‘dist/v1/js/‘ + name } }; }); //配置参数 grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), requirejs:requirejsOptions, watch: { js: { files:[‘resources/**/*.js‘], tasks:[‘default‘], options: {livereload:false} }, babel:{ files:‘resources/**/*.js‘, tasks:[‘babel‘] } }, jshint:{ build:[‘resources/**/*.js‘], options:{ jshintrc:‘.jshintrc‘ //检测JS代码错误 } }, copy: { /* main: { expand: true, cwd: ‘src‘, src: ‘**‘, dest: ‘dist/‘, }, */ main:{ files:[ {expand: true,cwd: ‘resources/v1/css/‘,src: ‘**‘,dest:‘dist/v1/css/‘}, {expand: true,cwd: ‘resources/v1/fonts/‘,src: ‘**‘,dest:‘dist/v1/fonts/‘}, {expand: true,cwd: ‘resources/v1/images/‘,src: ‘**‘,dest:‘dist/v1/images/‘}, {expand: true,cwd: ‘resources/v1/js/base/‘,src: ‘**‘,dest:‘dist/v1/js/base/‘} ] } }, babel: { options: { sourceMap: false, presets: [‘babel-preset-es2015‘] }, dist: { files: [{ expand:true, cwd:‘dist/v1/js/‘, //js目录下 src:[‘*.js‘], //所有js文件 dest:‘dist/v1/js/‘ //输出到此目录下 }] } }, uglify: { options: { mangle: true, //混淆变量名 comments: ‘false‘ //false（删除全部注释），some（保留@preserve @license @cc_on等注释） }, my_target: { files: [{ expand:true, cwd:‘dist/v1/js/‘, //js目录下 src:[‘*.js‘], //所有js文件 dest:‘dist/v1/js/‘ //输出到此目录下 }] } } }); //载入uglify插件，压缩js grunt.loadNpmTasks(‘grunt-contrib-copy‘); grunt.loadNpmTasks(‘grunt-babel‘); //grunt.loadNpmTasks(‘grunt-contrib-jshint‘); grunt.loadNpmTasks(‘grunt-contrib-uglify‘); grunt.loadNpmTasks(‘grunt-contrib-requirejs‘); grunt.loadNpmTasks(‘grunt-contrib-watch‘); //注册任务 grunt.registerTask(‘default‘, [‘copy‘,‘requirejs‘,‘babel‘,‘uglify‘]); grunt.registerTask(‘watcher‘,[‘watch‘]); }
参考地址：
使用grunt完成requirejs的合并压缩和js文件的版本控制
requirejs 多页面，多js 打包代码，requirejs多对多打包【收藏】
requirejs 多页面，多入口js文件打包总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。