【问题标题】:gulp browserify shim and jquery dependedgulp browserify shim 和 jquery 依赖
【发布时间】:2014-08-30 16:03:08
【问题描述】:

我正在使用 gulp 来构建我的脚本,并且我正在尝试将 jquery 1.11 “填充”到我的 js 脚本中,以便它可以使用它,我当前的代码:

简单脚本:

var $ = require('jquery')(window);

var SimpleScript = {

    init: function(){

        console.log('xxx');

    }
}

$(document).ready(function() {
    SimpleScript.init()
});

module.exports = SimpleScript;

skeleton.js:

var $ = require('jquery')(window);
var areaMng = require('./SimpleScript.js');

Gulfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var browserify = require('gulp-browserify');
var rename = require('gulp-rename');
var gzip = require('gulp-gzip');

gulp.task('js', function() {
    gulp.src('app/assets/scripts/skeleton.js')
        .pipe(browserify({
            shim: {
                jquery: {
                    path: 'public/js/jquery.min.js',
                    exports: '$'
                }
            }
        }))
        .pipe(gulp.dest('public/js'));

});

所有这一切都运行得非常顺利... 但 我收到一个错误,即 $ 未在调用的 --> SimpleScript.init() 中定义 --> console.log('xxx');

当然,当我尝试在 chrome 控制台中使用 --> "$" 访问 jquery 时,它没有被定义

* 注释 - 创建的文件里面有 jquery 1.11,我可以看到它。 - 我尝试引用 jquery、jQuery 和 $ 都一样。

【问题讨论】:

    标签: jquery gulp browserify shim browserify-shim


    【解决方案1】:

    解决了!!

    因为我安装了jquery,所以shim中同名“jquery”的文件导入不好。

    应该是这样的:

    简单脚本:

    var $ = require('jQuery');
    
    var SimpleScript = {
    
        init: function(){
    
            console.log('xxx');
    
        }
    }
    
    $(document).ready(function() {
        SimpleScript.init()
    });
    
    module.exports = SimpleScript;
    

    Gulfile.js

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var autoprefixer = require('gulp-autoprefixer');
    var minifyCSS = require('gulp-minify-css');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var browserify = require('gulp-browserify');
    var rename = require('gulp-rename');
    var gzip = require('gulp-gzip');
    
    gulp.task('js', function() {
        gulp.src('app/assets/scripts/skeleton.js')
            .pipe(browserify({
                shim: {
                    jQuery: {
                        path: 'public/js/jquery.min.js',
                        exports: '$'
                    }
                }
            }))
            .pipe(gulp.dest('public/js'));
    
    });
    

    【讨论】: