javascript 在 gulp 中使用 browserify 时如何向浏览器公开“require”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24329690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to expose 'require' to the browser when using browserify from within gulp?
提问by asolberg
When I have a file x.js that looks like this:
当我有一个看起来像这样的文件 x.js 时：
x.js
x.js
module.exports = function (n) { return n * 111 }
and I run browserify from the command line like so:
我从命令行运行 browserify，如下所示：
browserify -r ./x.js > bundle.js
I get an output file that looks like this (roughly):
我得到一个看起来像这样的输出文件（大致）：
require=(function e(t,n,r){function ......
./App.jsx":[function(require,module,exports){
module.exports=require('0+DPR/');
},{}]},{},[])
Then in my browser code I can do this:
然后在我的浏览器代码中，我可以这样做：
<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>
I actually have two questions:
其实我有两个问题：
1) This doesn't quite work in the browser I get the error: "Uncaught Error: Cannot find module './x.js'". Why is that happening?
1) 这在浏览器中不太有效，我收到错误：“未捕获的错误：找不到模块 './x.js'”。为什么会这样？
2) I actually want to run this in gulp using vinyl-source-stream. I've tried doing something like this in my gulpfile but it doesn't work. Any ideas? I get the error 'require is not defined'
2）我实际上想使用vinyl-source-stream在gulp中运行它。我试过在我的 gulpfile 中做这样的事情，但它不起作用。有任何想法吗？我收到错误“要求未定义”
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'));
回答by mikekidder
Update:You can reference an alias in your -r switch
更新：您可以在 -r 开关中引用别名
Try: browserify -r ./x.js:my-module > bundle.js
尝试： browserify -r ./x.js:my-module > bundle.js
And in your page: var x = require('my-module');
在您的页面中： var x = require('my-module');
NOTE: if you used an -r switch on a node module like fsor through, you don't need an alias for these because they usually have a name in their package.json file.
注意：如果您在像fs或through这样的节点模块上使用了 -r 开关，则不需要这些别名，因为它们通常在 package.json 文件中有一个名称。
See node-browserify -- external requiresfor more info.
有关更多信息，请参阅node-browserify --external requires。
If you are going to bundle your x.js like that (with -r switch) there are a couple of options
如果你打算像这样捆绑你的 x.js（使用 -r 开关），有几个选项
1) Take the script in your html page and bundle it separately.
1) 把你的html页面中的脚本单独打包。
Create a main.jsfile and put your JS in it.
创建一个main.js文件并将您的 JS 放入其中。
Use browserify -x ./x.js > main.js
利用 browserify -x ./x.js > main.js
By using the -x switch, Browserify will link your bundle.jsin as a dependancy.
通过使用 -x 开关，Browserify 会将您的bundle.js作为依赖项链接。
Then reference both JS files in your page.
然后在页面中引用这两个 JS 文件。
2) Use name generated by Browserify.
2) 使用由 Browserify 生成的名称。
var x = require('0+DPR/');
var x = require('0+DPR/');
See Updateabove to create an alias.
请参阅上面的更新以创建别名。
Good resource below since you are looking to go further with Gulp
下面是很好的资源，因为您希望通过 Gulp 走得更远
For more Gulp + Browserify (uses Watchify as well for livereload) Check out blog post on Viget
更多 Gulp + Browserify（使用 Watchify 以及 livereload）查看 Viget 上的博客文章
回答by Hafiz Ismail
Actually you got pretty close, except for two things:
实际上你已经很接近了，除了两件事：
you need to expose your
'x.js'with an exposed name that you can use to require() later, for e.g.:'x'is a good choice in your caseinstead of
require('./x.js');you should dorequire('x');
您需要使用公开的
'x.js'名称公开您的名称，您可以稍后将其用于 require()，例如：'x'在您的情况下是一个不错的选择而不是
require('./x.js');你应该做的require('x');
So to give you the full answer:
所以给你完整的答案：
in lib/x.js
在 lib/x.js
module.exports = function (n) { return n * 111 }
in gulpfile.js
在 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']);
in an HTML doc (index.html)
在 HTML 文档中 ( index.html)
<html>
...
<script src='dist/x.js'></script>
<script>
var x = require('x');
console.log(x(3));
</script>
A little bit details about the gulp recipe:
关于 gulp 配方的一些细节：
I used vinyl-transforminstead vinyl-source-stream.
我用vinyl-transform代替vinyl-source-stream。
You can choose to use vinyl-source-streambut you have to remember to pipe in vinyl-bufferright after that if you have more transformations using plugins that works on buffered vinyl file objects (instead of streaming vinyl file object that vinyl-source-streamgives out)
您可以选择使用，vinyl-source-stream但vinyl-buffer如果您使用适用于缓冲的乙烯基文件对象的插件进行更多转换（而不是流送的乙烯基文件对象vinyl-source-stream），则必须记住在此之后立即输入
What vinyl-transformdoes is that it takes care of both buffered and streaming vinyl file objects for you.
是什么vinyl-transform做的是，它需要同时兼顾缓冲和流乙烯基文件对象的为您服务。
