问题描述
当我有一个看起来像这样的文件 x.js 时:
When I have a file x.js that looks like this:
x.js
module.exports = function (n) { return n * 111 }
然后我像这样从命令行运行 browserify:
and I run browserify from the command line like so:
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>
我其实有两个问题:
1) 这在浏览器中不太有效我收到错误:未捕获的错误:找不到模块'./x.js'".为什么会这样?
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) 我实际上想使用乙烯基源流在 gulp 中运行它.我试过在我的 gulpfile 中做这样的事情，但它不起作用.有任何想法吗?我收到错误未定义要求"
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'
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 开关中引用别名
Update: You can reference an alias in your -r switch
试试:browserify -r ./x.js:my-module >bundle.js
在你的页面中:var x = require('my-module');
注意:如果您在 fs 或 through 等节点模块上使用 -r 开关，则不需要为这些模块设置别名，因为它们通常有名称在他们的 package.json 文件中.
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.
参见node-browserify -- 外部要求 了解更多信息.
See node-browserify -- external requires for more info.
如果你打算像这样(使用 -r 开关)捆绑你的 x.js，有几个选项
If you are going to bundle your x.js like that (with -r switch) there are a couple of options
1) 将脚本放入您的 html 页面并单独捆绑.
1) Take the script in your html page and bundle it separately.
创建一个 main.js 文件并将你的 JS 放入其中.
Create a main.js file and put your JS in it.
使用browserify -x ./x.js >main.js
Use browserify -x ./x.js > main.js
通过使用 -x 开关，Browserify 会将您的 bundle.js 作为依赖项链接.
By using the -x switch, Browserify will link your bundle.js in as a dependancy.
然后在你的页面中引用这两个JS文件.
Then reference both JS files in your page.
2) 使用 Browserify 生成的名称.
2) Use name generated by Browserify.
var x = require('0+DPR/');
var x = require('0+DPR/');
请参阅上面的更新以创建别名.
See Update above to create an alias.
下面是很好的资源，因为您希望通过 Gulp 走得更远
Good resource below since you are looking to go further with Gulp
- Browserify - 将 Nodejs 模块带到浏览器
更多 Gulp + Browserify(使用 Watchify 以及 livereload)查看 Viget 上的博客文章
For more Gulp + Browserify (uses Watchify as well for livereload) Check out blog post on Viget
- Gulp + Browserify:所有帖子
这篇关于从 gulp 中使用 browserify 时如何向浏览器公开“要求"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！