[工具配置]requirejs 多页面,多入口js文件打包总结 使用grunt完成requirejs的合并压缩和js文件的版本控制requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】

需要明确以下几点:

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,css。

copy: {
            /*
          main: {
            expand: true,cwd: 'src',src: '**',dest: 'dist/',},*/
          main:{
              files:[
                {expand: true,cwd: 'resources/v1/css/',dest:'dist/v1/css/'},{expand: }
              ]
          }
        }

第二步,通过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'"vuedraggable":'base/vuedraggable'"sortablejs":'base/Sortable''baseUrl':'widgets/baseUrl'"ajaxfileupload":'widgets/ajaxfileupload'"comp":'widgets/comp''accountCenter':'view/accountCenter''templateUploadCtr':'view/templateUploadCtr'    
                },shim:{
                    'vue':{
                        exports:'vue'
                   },'basicLib':['jquery'],'bootstrap':['jquery''sortablejs':['vue']
                },optimizeAllPluginResources: true name
            }
        };    
    });

接着初始化配置以及加载注册任务

grunt.initConfig({
    requirejs: requirejsOptions
})

grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default',['requirejs']);

由于我的代码中有es6语法,所以合并后把其中的es6语法转化成es5的;再后面在压缩去掉注释什么的。

总的配置代码如下:

    module.exports = (grunt) {  
     name
            }
        };    
    });
    
    配置参数  
    grunt.initConfig({  
        pkg: grunt.file.readJSON('package.json'),requirejs:requirejsOptions,watch: {
           js: {
            files:['resources/**/*.js'false}
          },babel:{
              files:'resources/**/*.js']
          }
        },jshint:{
            build:['resources/**/*.js'检测JS代码错误
            }
        },copy: {
            }
              ]
          }
        },babel: {
            options: {
                sourceMap: ]    
            },dist: {
                files: [{
                   expand:js目录下
                   src:['*.js'],1)">所有js文件
                   dest:'dist/v1/js/'  输出到此目录下
                 }] 
            }
        },uglify: {  
            options: {
                mangle: 混淆变量名
                comments: 'false' false(删除全部注释),some(保留@preserve @license @cc_on等注释)
            },my_target: {
                 files: [{
                   expand:                 }] 
            } 
        }
        
    });  
      
      载入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多对多打包【收藏】

 

相关文章

一准备工作umi为react的一个封装比较nice的脚手架。优点当然...
webpack在引入两个依赖的包时,可能需要使用shimming,意思是...
  Happypack (plugin)多线程使用loader编译文件treeshaki...
一目录结构├──build//构建相关├──config//配置相关├─...
接着第一节的demo现在我们尝试整合一些其他资源,比如图像,...
webpack的打包原理识别入口文件通过逐层识别模块依赖(Common...