【问题标题】:Browserify-shim with gulpBrowserify-shim 与 gulp
【发布时间】:2015-08-18 06:12:02
【问题描述】:

我正在使用 browserify 测试 gulp,我正在尝试使以下工作:

我有一个名为 export.js 的文件,它依赖于另一个名为 export2.js 的文件。

export.js

module.exports = function(){ 
    console.log("test export"); 
}; 

export2.js

module.exports = function(){
    console.log("export 2"); 
}

我有另一个名为 app.js 的文件,我在其中定义了以下代码:

var e = require("e"); 

我尝试使用 shim 来定义依赖关系。
我的 package.json 中的相关代码如下所示:

  "browserify-shim": { 
        "jquery": "$", 
        "public/src/js/home/export.js":  { 
            "exports": "e", 
            "depends": [ 
              "public/src/js/home/export2.js"
            ]
        }
  }, 
  "browserify": {
      "transform": [
          "browserify-shim" 
      ]
  }, 

路径应该是正确的。

我的 gulp 文件定义:

//Uglifies scripts 
gulp.task("uglify-scripts", function(){ 
    return browserify({ entries:["public/src/js/home/app.js"]})
            .bundle()
            .pipe(source("bundle.js"))  // gives streaming vinyl file object
            .pipe(buffer())             //convert from streaming to buffered vinyl file object
            .pipe(uglify())             //gulp-uglify 
            .pipe(gulp.dest("public/src/js/home/dist"))
            .pipe(livereload()); 

}); 

我之前测试过这个任务(没有依赖的 app.js 的丑化),它运行良好。
但是,在定义了 shim 之后,我仍然在控制台中收到一条消息,提到

找不到模块“e”

你能看出哪里出了问题或我误解了什么吗?

【问题讨论】:

    标签: node.js gulp browserify shim browserify-shim


    【解决方案1】:

    垫片适用于不支持 commonJS 的模块。您可以简单地明确定义这些依赖项:

    export.js

    var e2 = require('./export2.js');
    module.exports = function(){ 
        console.log("test export"); 
    };
    

    export2.js

    module.exports = function(){
        console.log("export 2"); 
    };
    

    app.js

    var e = require('public/src/js/home/export.js');
    

    【讨论】:

    • 好的,谢谢,它就是这样工作的。我忘了 browserify 不是异步的,所以我不需要使用 shim 来管理依赖项。