从gulp使用browserify时如何向浏览器公开'require'？ [英] How to expose 'require' to the browser when using browserify from within gulp?
问题描述
当我有一个如下所示的文件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： [函数（require，module，exports）{
module.exports = require（'0 + DPR /'）;
}，{}]}，{}，[]）
然后在我的浏览器代码中，我可以这样做：
<$ p $ React服务器渲染示例< / title>
< script src =static / bundle。 js>< / script>
< / head>
< body>
欢迎使用React服务器渲染示例：以下是服务器渲染的React组件：
< div id =53a442ff8b39d>< / div>< script>
var x = require（'./ x.js'）;
console.log（x（3） ）
< / script>< / body>
< / html>
我其实有两个问题：
1）这在浏览器中并不适用得到错误：未捕获的错误：找不到模块'./x.js'。为什么会发生这种情况？
2）我真的想用乙烯源码流来运行它。我试过在我的大文件中做这样的事情，但它不起作用。有任何想法吗？我得到错误'需求未定义'
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 或）之间使用了-r开关，则，您不需要别名，因为它们通常在其package.json文件中有一个名称。
请参阅 node-browserify - 外部要求 以获取更多信息。
如果您打算将您的x.js捆绑在一起（使用-r开关），您可以选择一些选项。
1）将您的html页面中的脚本分开捆绑。
使用 然后在页面中引用这两个JS文件。 2）使用由Browserify生成的名称。 查看更新以创建别名。 良好的资源，因为你希望进一步与Gulp 更多Gulp + Browserify（使用Watchify以及livereload）查看关于Viget的博文 When I have a file x.js that looks like this: x.js and I run browserify from the command line like so: I get an output file that looks like this (roughly): Then in my browser code I can do this: 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? 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'
Update: You can reference an alias in your -r switch Try: And in your page: NOTE: if you used an -r switch on a node module like fs or through, you don't need an alias for these because they usually have a name in their package.json file. See node-browserify -- external requires for more info. If you are going to bundle your x.js like that (with -r switch) there are a couple of options 1) Take the script in your html page and bundle it separately. Create a main.js file and put your JS in it. Use By using the -x switch, Browserify will link your bundle.js in as a dependancy. Then reference both JS files in your page. 2) Use name generated by Browserify. See Update above to create an alias. Good resource below since you are looking to go further with Gulp For more Gulp + Browserify (uses Watchify as well for livereload) Check out blog post on Viget 这篇关于从gulp使用browserify时如何向浏览器公开'require'？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ browserify -x ./x.js>通过使用-x开关，Browserify将链接您的 。 > bundle.js 作为依赖关系。
var x = require（'0 + DPR /'）;
$ b
module.exports = function (n) { return n * 111 }
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>
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'));
browserify -r ./x.js:my-module > bundle.jsvar x = require('my-module');
browserify -x ./x.js > main.jsvar x = require('0+DPR/');
