从gulp中使用browserify时如何暴露“要求”浏览器？
当我有一个文件x.js，看起来像这样：
x.js
module.exports = function (n) { return n * 111 } 我从命令行运行browserify就像这样：
browserify -r ./x.js > bundle.js
我得到一个看起来像这样（粗略）的输出文件：
require=(function e(t,n,r){function ...... ./App.jsx":[function(require,module,exports){ module.exports=require('0+DPR/'); },{}]},{},[])
然后在我的浏览器代码中，我可以这样做：
<html> <head> <title>React server rendering example</title> <script src="static/bundle.js"></script> </head> <body> Welcome to the React server rendering example. Here is a server-rendered React component: <div id="53a442ff8b39d"></div><script> var x = require('./x.js'); console.log(x(3)) </script> </body> </html>
我其实有两个问题：
1）这在浏览器中不起作用我得到的错误：“未捕获的错误：找不到模块'./x.js'”。 为什么会这样呢？
2）我实际上想用乙烯源stream来运行它。 我试过在我的大文件中做这样的事情，但它不起作用。 有任何想法吗？ 我得到错误“需求未定义”
var gulp = require('gulp'), browserify = require('browserify'), source = require('vinyl-source-stream'); var b = browserify({ entries: ['./x.js'], }); b.bundle({debug: false}) .pipe(source('bundle.js')) .pipe(gulp.dest('./build'));
更新：您可以在-r开关中引用别名
试试： browserify -r ./x.js:my-module > bundle.js
并在您的页面： var x = require('my-module');
注意：如果您在节点模块（如fs或through）上使用-r开关，则不需要别名，因为它们通常在其package.json文件中有一个名称。
请参阅node-browserify – 外部需要获取更多信息。
如果你要打包你的x.js（使用-r开关），有几个选项
1）把你的html页面的脚本分开捆绑。
创build一个main.js文件，并把你的JS。
使用browserify -x ./x.js > main.js
通过使用-x开关，Browserify将链接您的bundle.js作为依赖。
然后在页面中引用这两个JS文件。
2）使用由Browserify生成的名称。
var x = require('0+DPR/');
请参阅上面的更新以创build别名。
良好的资源下面，因为你正在寻找进一步与Gulp
- Browserify – 将Nodejs模块带到浏览器
更多Gulp + Browserify（使用Watchify以及livereload）查看关于Viget的博客文章
- Gulp + Browserify：一切post
其实你们差不多，除了两件事：
-
你需要将你的
'x.js'公开一个你可以用来稍后需要（）的名字，例如：'x'在你的情况下是个不错的select -
而不是
require('./x.js');你应该require('x');
所以给你完整的答案：
在lib/x.js
module.exports = function (n) { return n * 111 }
在gulpfile.js
var gulp = require('gulp'); var browserify = require('browserify'); var transform = require('vinyl-transform'); gulp.task('build-lib', function () { var browserified = transform(function(filename) { return browserify(filename) .require(filename, { expose: 'x'}) .bundle(); }); return gulp.src('./lib/x.js') .pipe(browserified) .pipe(gulp.dest('./dist')); // currently this recipe will output to ./dist/x.js. you may use a rename plugin to output it with a different filename for eg. bundle.js }); gulp.task('default', ['build-lib']);
在一个HTML文档（ index.html ）
<html> ... <script src='dist/x.js'></script> <script> var x = require('x'); console.log(x(3)); </script>
有关吞咽食谱的一些细节：
我用vinyl-transform而不是vinyl-source-stream 。
你可以select使用vinyl-source-stream但是如果你有更多使用缓冲的乙烯基文件对象的插件的转换（而不是乙烯基文件对象， vinyl-source-stream发出）
vinyl-transform作用是为您处理缓冲和stream式乙烯基文件对象。
- browserify-shim在var范围内不导出隐式全局variables
- Browserify with require（'fs'）
- 为什么我得到这个node.js构build错误？
- 如何使用Browserify和iOS JavaScriptCore
- 对象＃<Readable>在使用Gulp + Browserify时没有方法“写入”
- 使用Browserify / Babel / node.js你可以要求一个基于variablesstring的文件
- 在Windows上使用karma-browserify找不到模块错误
- 从另一个脚本运行节点包+参数
- Amazon S3提供InvalidDigest：您指定的Content-MD5无效