很难将browserfy填充程序与grunt browserfy(>2.0.2)一起用作转换
Difficulty getting browserify-shim working with grunt-browserify (> 2.0.2) as transform
在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-shim
与browserify
一起使用。它立即工作,没有任何问题。
我已经相信,三个库(browserify
、grunt-browserify
和browserify-shim
)的组合都只是更新和更改得太快,无法在更新时依靠它们一起工作。去掉grunt
组件使剩下的两个组件更易于管理。
browserfy shim的创建者似乎同意:
根据我的经验,每当人们将browserfy和browserfy shim(两者都可以在package.json中完美配置)封装在任务运行器中时,他们的生活就会变得更加艰难。
我也很难进行此设置,但我通过从Gruntfile.js
中完全删除填充程序设置并让browserify
在package.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任务
- 转义符不能与innerHTML一起使用
- 高亮显示与数组字符串一起使用时文本插件中断
- setTimeout可以与闭包内的函数一起使用吗
- 将依赖外部库的UMD模块与browserfy捆绑在一起
- Highcharts colorsByPoint与系列中的线性渐变一起使用时不起作用
- 如何将js库与typescript一起使用
- 将webpack和babel与父项目目录中的文件一起使用
- 将 Drag&Drop 与 jsTree 和 DataTables 一起使用
- Javascript-如何让脚本与Ajax请求的数据一起运行
- 将两个ext.TabPanels滚动到一起
- 将jQuery UI Timepicker Addon与React一起使用
- 什么是curl以及如何将其与nodejs一起使用
- Javascript”;onmousemove”;事件无法与类一起使用
- 将require('..')与变量一起使用与在webpack中使用字符串相比
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 将dropzone与browserfy一起使用时,$(..).dropzone不是一个函数
- 与browserfy、tsify和reatify一起咕咕叫
- 如何与laravel和browserfy一起使用es*-垫片
- 如何将未缩小和缩小的js文件与browserfy捆绑在一起
- 很难将browserfy填充程序与grunt browserfy(>2.0.2)一起用作转换