我正在尝试在浏览器中使用Browerifiy,如果我使用独立选项它会暴露一个模块.我不想这样做.网站和文档似乎在我实际编译代码的任何地方都被切断了.没有人说过如何在浏览器属性中实际使用代码.
我有一个笨拙的任务:
browserify: {
standalone: {
src: [ '<%= yeoman.server %>/shared-components/**/*.js' ],
dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
/* Commented out, zero documentation on this. Can only expose one module it seems.
options: {
browserifyOptions: {
standalone: 'Utility' //Unable to say '**/*' error :-/
}
}
*/
},
这似乎工作,它使这样的文件:
(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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 47 && code < 58) && // numeric (0-9)
!(code > 64 && code < 91) && // upper alpha (A-Z)
!(code > 96 && code < 123)) { // lower alpha (a-z)
return false;
}
}
return true;
};
module.exports = Utility;
},{}]},{},[1,2]);
我使用注入器自动包含它,该注入器类似于:
现在我希望我能打电话
require('Utility');
但我明白了
Uncaught ReferenceError: require is not defined(…)
我不知道/无法在浏览器中加载这些模块.:' - /
你有两个选择.不管你
为要在浏览器中访问的每个库创建独立的browserify模块.这已在您的其他帖子中得到解答.基本上你做了多个browserify捆绑.
.
browserify library1.js --standalone Library1 -o library1-bundle.js browserify library2.js --standalone Library2 -o library2-bundle.js browserify library3.js --standalone Library3 -o library3-bundle.js
所以,在您的构建工具中,您将拥有
browserify: {
library1 : {
src: [ '<%= yeoman.server %>/shared-components/library1.js' ],
dest: '<%= yeoman.client %>/app/js/library1-bundled.js',
bundleOptions : { standalone : 'Library1' }
},
library2 : {
src: [ '<%= yeoman.server %>/shared-components/library2.js' ],
dest: '<%= yeoman.client %>/app/js/library2-bundled.js',
bundleOptions : { standalone : 'Library2' }
},
library3 : {
src: [ '<%= yeoman.server %>/shared-components/library3.js' ],
dest: '<%= yeoman.client %>/app/js/library3-bundled.js',
bundleOptions : { standalone : 'Library3' }
}
}
或者,为所有模块创建一个主入口点.
// ---- main.js -----
module.exports.Library1 = require('./lib1');
module.exports.Library2 = require('./lib2');
module.exports.Library3 = require('./lib3');
然后,您使用browserify
browserify main.js --standalone Library -o bundle.js
然后在浏览器中
在你的艰巨任务中:
browserify: {
standalone: {
src: [ '<%= yeoman.server %>/shared-components/main.js' ],
dest: '<%= yeoman.client %>/app/js/main-bundled.js',
bundleOptions : { standalone : 'Library' }
}}
然后,为了扩展我在上一篇文章中所做的答案,browserify以不同的方式公开它的捆绑模块,具体取决于您环境中的模块管理器.
如果你在节点中,它是commonJS(同步),所以你可以使用require('');
如果您使用的是AMD(异步),则可以使用该AMD语法.
如果您在浏览器中,则可以使用任一窗口.或全球的.
要稍微自动化,您还可以传递配置:
bundledLibraries : [
Library1 : {
src : './../src/lib1.js',
dest : './../src/lib1-bundled.js'
},
Library2 ...
]
然后你迭代将它们添加到grunt配置(
查看本文以动态创建它们http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html
京公网安备 11010802040832号 | 京ICP备19059560号-6 
