[工具配置]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文件打包总结

最新文章

热门文章