很难将browserfy填充程序与grunt browserfy(>2.0.2)一起用作转换

Difficulty getting browserify-shim working with grunt-browserify (> 2.0.2) as transform

本文关键字:browserfy 一起 转换 程序 填充 grunt 很难 gt      更新时间:2023-09-26

grunt-browserify的2.0.2版本中,browserify-shim从模块本身中删除,并转换为用作transform,而不是grunt-browserify任务中的直接option

版本的将垫片与grunt-browserify一起使用看起来如下:

'libs-dev': {
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')],
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'),
    options: {
        shim: {
            angular: {
                path: path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js'),
                exports: 'angular'
            }
        }
    }
}

这非常有效,并围绕libs.js模块生成了一个包装器,如下所示:

require=(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({"angular":[function(require,module,exports){
    module.exports=require('i10PRm');
},{}],"i10PRm":[function(require,module,exports){
    (function(global){(function browserifyShim(module, exports, define, browserify_shim__define__module__export__) {
        browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular);
    }).call(global, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; });
})(window)
},{}]},{},["i10PRm"]);

然而,根据(极其稀疏和令人沮丧的)文档,grunt-browserify版本的垫片被用作transform,例如:

'libs-dev': {
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')],
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'),
    options: {
        transform: ['browserify-shim']
    }
}

而且,由于browserify-shim的配置现在完全基于package.json的配置,所以我的package.json看起来是这样的:

"browser": {
    "angular": "./bower_components/angular/angular.js"
},
"browserify-shim": {
    "angular": "angular"
}

然而,这会生成一个包装器,看起来像:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    (function (global){
        __browserify_shim_require__=require;(function browserifyShim(module, exports, require, define, browserify_shim__define__module__export__) {
            browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular);
    }).call(global, undefined, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; });
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1]);

正如你所看到的,这个新包装器缺少了一些东西;似乎没有与旧包装中分配的CCD_ 13导出值等效的值。据推测,这意味着我以某种方式错误地使用了导出,尽管我遵循了browserify-shim文档,这一切看起来都相当简单。

希望获得有关grunt-browserify>= 2.0.2)和browserify-shim的最新版本以及如何正确使用它们的任何帮助或澄清。

这只是为了子孙后代的利益而进行的更新:我最终放弃了grunt-browserify,只从命令行将browserify-shimbrowserify一起使用。它立即工作,没有任何问题。

我已经相信,三个库(browserifygrunt-browserifybrowserify-shim)的组合都只是更新和更改得太快,无法在更新时依靠它们一起工作。去掉grunt组件使剩下的两个组件更易于管理。

browserfy shim的创建者似乎同意:

根据我的经验,每当人们将browserfy和browserfy shim(两者都可以在package.json中完美配置)封装在任务运行器中时,他们的生活就会变得更加艰难。

我也很难进行此设置,但我通过从Gruntfile.js中完全删除填充程序设置并让browserifypackage.json中处理这些设置,成功地使其正常工作。在这里,我使用的是带有jquery的填充程序,你也可以看到我运行的版本如下:

// portion of package.json
"browser": {
    "jquery": "./js/lib/jquery-1.11.0.min.js"
},
"browserify-shim": {
    "jquery": "$"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},
"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-cli": "~0.1.10",
    "browserify": "~3.44.2",
    "browserify-shim": "~3.4.1",
    "grunt-browserify": "~2.0.8"
}

我的Gruntfile.js的相关部分现在看起来是这样的:

// portion of Gruntfile.js
browserify: {
    bundleOptions: {
        debug: true
    },
    src: 'js/src/main.js',
    dest: 'js/output.js'
},

grunt:browserify现在按预期工作,调用browserify,但允许它自己处理browserify-shim

不要通过grunt watch运行browserfy,这不会反映您在中间所做的更改。

因此,每当您更改package.json文件时,请通过grunt broswerify 运行browserfy任务