从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')); 

       

网上收集的解决方案 "从gulp中使用browserify时如何暴露“要求”浏览器?"

更新:您可以在-r开关中引用别名

试试: browserify -r ./x.js:my-module > bundle.js

并在您的页面: var x = require('my-module');

注意:如果您在节点模块(如fsthrough)上使用-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

其实你们差不多,除了两件事:

  1. 你需要将你的'x.js'公开一个你可以用来稍后需要()的名字,例如: 'x'在你的情况下是个不错的select

  2. 而不是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式乙烯基文件对象。