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

6

背景

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

图片描述

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

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

工具

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

文件结构

图片描述

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

test 代码如下:

require(["require-config"], function() {
    require([
        'xxxxxxx1',
        'xxxxxxx2',
        'xxxxxxx3',
        'xxxxxxx4',
    ]);
});

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.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 中查看结果

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

后记

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

23 条评论
limichange · 2015年06月04日

webpack大法好

+1 回复

kycool 作者 · 2015年06月04日

yeah 谢谢 webpack 确实不错 由于时间关系,暂时先用最熟悉的,以后慢慢迁移

回复

limichange · 2015年06月05日

最初我们用闭包,后来我们有了AMD和CMD,现在我们有了webpack和browserify,未来我们有es6 O(∩_∩)O

回复

阿驴 · 2015年08月13日

请教个问题,那个test.js   如果我放到 libs 文件夹内,是不是就不行了,必须和require_config.js 是平级的?

如果必须不必须是平级的,那么我这么设置。
return gulp.src('./js/libs/test.js')
.pipe(amdOptimize('test', {
是可以找到 test模块的 , 然后 test模块内require的模块都找不到了 可能是路径不对, 这个跟baseUrl的设置有关系吗?

回复

kycool 作者 · 2015年08月13日

test.js 放到任何路径都是可以的,不是必需和 require_config.js 平级

      return gulp.src('./js/**/*.js')
        .pipe($.amdOptimize('shell/test', {
            configFile: './js/require-config.js',
            findNestedDependencies: true,
            include: false
        }))

这是我之前写过通过测试的 不过 test 中加载资源的路径必需是相对 baseUrl 的绝对路径

回复

阿驴 · 2015年08月13日

解决了,感谢感谢~!

回复

kycool 作者 · 2015年08月13日

现在推荐使用 Webapck | Systemjs + Babel.js

回复

刘子渊 · 2015年09月24日

关于去除require-config.js的内容,试试看这样行不行:

gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false,
      exclude: '.js/require-config'
    }))

我打包requirejs的时候没有用amd-optimze,用的是gulp-requirejs-optimize,用exclude属性达到去除requirejs配置的目的。虽然用的插件不一样,但是exclude本就是r.js的配置项,道理应该一样的。博主可以一试。

回复

东邪 · 2015年10月11日

楼主,能放在github上吗? 相看下你这个例子的源码

回复

flyjennyetn · 2015年12月22日

博主请问怎么能联系到你 我看到你也使用了Backbone ,那你如何打包压塑的呢,路由这块你是怎么解决的呢。 你可以加下我Q1713260856 吗? 希望能得到你的帮组

回复

flyjennyetn · 2015年12月23日

请问下 你关联的时候路由这块是怎么处理的

回复

刘子渊 · 2015年12月23日

额,你说的什么路由?

回复

flyjennyetn · 2015年12月23日

可以加下我的 Q1713260856 吗 我详细和你说下? 或者可以告诉下我你的联系方式

回复

刘子渊 · 2015年12月23日

评论里说不清么?

回复

flyjennyetn · 2015年12月23日

。。 说不清楚,跟你的不一样 麻烦能给个联系放心吗,我给你看下我的结构

回复

厨子sir · 2016年03月28日

如果不使用config来进行配置到是可以合并,使用config来配置执行任务的时候会报错,也就是config里paths里定义了一个m1,调用这个m1时报依赖文件未定义

回复

干掉上帝 · 2016年04月06日

gulp 在合并require的时候 会把代码混淆一点 就把形参修改掉 这个怎么破?

回复

请叫我蛋蛋哥 · 2016年04月27日

gulp-filter 排除一下就好咯

code
var filter = gulpFilter(['*/', '!js/require-config.js'], {restore: true});

gulp.src('./js/**/*.js')
    .pipe(filter)
    .pipe(amdOptimize('test', {
        configFile: './js/require-config.js',
        findNestedDependencies: true,
        include: false
    }))
    .pipe(filter.restore)
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS())
    .pipe(gulp.dest('./jsbuild/'));

code

回复

Rachel · 2016年06月08日

实际项目中会遇到公共文件打包一份,业务模块打包一份。这样的情况应该怎么做呢?

回复

sean_wx · 2016年11月17日

随便撸过..具体没操作过..但是我觉得可以用排除法啊...gulp.src(['./js/*/.js','!你的config.js'])

回复

载入中...