前端 | gulp 打包 require.js 模块依赖

背景

项目JS脚本是使用 require.js 来组织

define([
  'jquery',
  'backbone',
  'webuploader'
], function($, Backbone, WebUploader) {

  "use strict";

  ISPORT.views = ISPORT.views || {};

  ISPORT.views.WidgetUploadMulti =  Backbone.View.extend({

    events: {
      'click [data-action="upload"]': '_eBackUpload'
    },

在依赖没有打包之前,加载是这样
图片描述

请求太多,一个有洁癖的人肯定是受不了的,故需求就产生了,打包 require.js 模块代码依赖

工具

我使用 gulp 作为前端任务管理器,使用 amd-optimize 来打包require.js 模块依赖 有人说此插件下载量太低,不敢用,我也就呵呵了,工具是用来解决问题的,不是给人看的,实在不行,查看源代码自己造个轮子也不错

文件结构

图片描述

我是用上图中的 test.js 作为打包入口文件

test 代码如下:

require(["require-config"], function () {
    require([
        'apps/desk/collect/index',
        'apps/desk/detail/detail',
        'apps/desk/list/list',
        'apps/desk/profile/index'
    ]);
})

gulp 任务函数

var concatFile = require('gulp-concat')
  , uglifyJS = require('gulp-uglify')
  , shell = require('gulp-shell')
  , amdOptimize = require('amd-optimize');
  
gulp.task('bundle', function () {
  return gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS('test.js'))
    .pipe(gulp.dest('./jsbuild/'));
});

运行任务之后,文件已经打包指定目录
注意: 任务函数中我没有压缩,用意等下解释

问题

  • debug 环境下加载了 require-config.js
  • production 环境使用的是打包后的模块文件,即 ./jsbuild 中的 test.js 没有加载 require-config.js,至于原因:因为模块依赖已经打包到一个文件中,已经没有必要加载 require-config.js

但是生产环境测试发现:
图片描述
发现还是有很多请求发生,也就是说打包没有起到作用

查看生成的 ./jsbuild/test.js 文件,直接查看最后几行代码 就会发现

require.config({
    baseUrl: "/static/js",
        paths: {
            "common": "apps/common",
            "jquery": "libs/jquery/jquery-1.11.1.min",
            "jq-plugin": "libs/jqueryplugin",
            "modernizr": "libs/modernizr/min",
            "fd": "libs/foundation",
            "fdmini": "libs/foundation/foundation.min",
            "webuploader": "libs/webuploader/webuploader.min",
            "simple-module": "libs/simditor/module",
            "simple-hotkeys": "libs/simditor/hotkeys",
            "simple-uploader": "libs/simditor/uploader",
            "simditor": "libs/simditor/simditor",
            "zepto": "bowerjs/zepto/zepto",
            "backbone": "bowerjs/backbone/backbone",
            "underscore": "bowerjs/underscore/underscore-min",
            "template": "template/build"
          },

        shime: {
            "fdmini": {
                deps: ['jquery']
            }
        }
});

发现打包后的文件中包含了 require-config.js 的内容,在插件的配置选项中没有发现去除包含 require.js 配置文件的选项 【如果你发现了,请分享下,万分感谢

不得已采用 shell 处理,修改后的任务函数如下

gulp.task('isport:desk', function() {
  gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS())
    .pipe(gulp.dest('./jsbuild/'))
    .pipe(shell([
      "sed '/require.config({/, $d' ./jsbuild/test.js > ./jsbuild/test-mini.js",
      "rm ./jsbuild/test.js"]));

  return gulp.src('./jsbuild/test-mini.js')
    .pipe(uglifyJS())
    .pipe(gulp.dest('./jsmini'));
}); 

运行任务后,在debug tools 中查看结果

图片描述
通过发现,干净了,心情舒畅了

后记

实话说这种方法打包并不是很完美,至于完美的方法一直在不断的探索中

阅读 37.7k

推荐阅读
黑月亮
用户专栏

点滴记录,步步成长

10 人关注
41 篇文章
专栏主页