問題描述
當我有一個看起來像這樣的文件 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.
創建一個 ma??in.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 時如何向瀏覽器公開“要求"?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！