服务端渲染express的模版时,根据不同的服务端变量去引用各自的js文件,如何对这些js文件进行打包?
发布于 14天前 作者 jimokanghanchao 222 次浏览 来自 问答

项目中,不同的页面可能会引用不同的js文件,结合服务端的变量,我把引用js的逻辑写成了express-handlebars模版。参见下图 现在想将js文件打包,使得每一个页面的多个js引用合并,处理这种场景,想问问大家有什么更好的方式?

5 回复

只是合并的话,可以用 grunt 。grunt-contrib-uglify 可以同时 minified 和 concat 。 但是不同页面也会有共用的吧。 也可以看下 requirejs

推荐使用gulp 这有一个很简单的例子 , 你一看就懂了

// 引入 gulpvar gulp = require('gulp'); 

// 引入组件var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合并,压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

大家说的方案,我都去尝试了下,可能是我一开始把问题想复杂了,我最初想实现的是一个模版中,根据服务端的变量,添加引用不同的脚本路径,由于模版要在服务端渲染,所以一个页面需要打包哪些脚本,得模版渲染完了才知道,所以想在这个时候去实现一个带有缓存的打包机制。

gulploader可能适用于当引用的脚本,不依赖于服务端的变量,不需要在模版渲染后才知道哪些脚本需要打包这种情况。所以我简化了自己目前模版的逻辑,不根据业务去很细化的区分不同的脚本引用路径,先把gulp这个工具用了起来,所有页面都是相同的脚本引用。

至于require.js,我现在脚本之间的依赖结构基本没有,所以暂时没去用它解决依赖。

我这边的思路跟你完全相反。 标示js文件,注明它是被什么页面引用的。 然后通过gurnt工具,合并有相同页面引用的js,然后插入到页面中…

回到顶部