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多对多打包【收藏】

时间: 2024-11-05 22:38:04

requirejs 多页面,多入口js文件打包总结的相关文章

使用grunt完成requirejs的合并压缩和js文件的版本控制

最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据 r.js 封装的 grunt 插件. 安装 gr

通过切换页面引用的js文件实现下拉框的联动

在之前的项目之中,页面最高的角色级别是城市级,一个页面最多是展示一个城市的信息. 因此为每个城市创建了一个js文件,在其中存放此城市的信息,如图: 在此我们关注js文件中存放的区县信息,以北京为例,其区县信息如图: var Districts=[{name:'昌平',index:0},{name:'朝阳',index:1},{name:'崇文',index:2},{name:'大兴',index:3},{name:'东城',index:4}]; 由于之前的页面最多加载某一城市的js文件,Dist

requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. http://www.qdmm.c

使用r.js打包js文件

之前的文章里有介绍requirejs的基本使用方法,但是直接使用requirejs会暴露出一个问题,就是当模块过多的时候,requirejs就会引入许多js文件,大大的增加了请求数,那么有的朋友就要说了,我们自己压缩那些模块文件不就行了么,其实仔细想想这样到底行不行,答案是行!但是很麻烦: 1. 首先一般我们写模块时不会去定义模块名字,因为模块名字默认就是js文件名字,如果自己手动去写模块名,就增加了额外的工作量. 2. 加载顺序的问题,自己手动压缩,就要严格把控好模块的先后顺序(特别是有jqu

Python+Django+js+echarts引入本地js文件的操作方法

1. 选择正确的echarts.js,开发版选择echarts.baidu.com上的源码版,避免出现问题 2. 在项目主目录中新建static文件夹,里面建立js.css.images文件夹 3. 在settings文件中新增如下代码配置: STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static') STATICFILES_DIRS = ( ('css', os.path.join(STATIC_ROOT, 'c

js文件引入问题

我们在页面中引入js文件的时候<script>标签一定要是<script></script>这种形式 如果写成了<script/>的这种形式 会造成js文件引入不成功 正确的引入方式:

自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候,在页面中导入js文件用本插件进行引入的话, 那么其他请求的页面中也导入了和前面页面相当的js文件的情况下,那这些js文件就不需要重新引入.插件会自动忽略之前已

Js文件中文乱码

aspx页面引用的js文件中如果包括中文,中文显示乱码或者引起脚本错误.提示是'未结束的字符串' 原因:aspx页面的默认编码是utf-8,而js文件的默认编码是gb2312,两者之间不一致引起了中文乱码 解决一:在页面引用js文件的时候指定js文件的编码,添加属性charset="gb2312" 比如:<script language="javascript" src="http://www.cnblogs.com/Jquery/jquery.al

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS