aso*_*erg 8 javascript node.js browserify 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":[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)我实际上想要使用vinyl-source-stream在gulp中运行它.我已经尝试在我的gulpfile中做这样的事情,但它不起作用.有任何想法吗？我收到错误'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开关中引用别名
尝试: browserify -r ./x.js:my-module > bundle.js
在您的页面中: var x = require('my-module');
注意:如果在节点模块上使用-r开关(如fs或through),则不需要别名,因为它们的package.json文件中通常有一个名称.
有关详细信息,请参阅node-browserify - external要求.
如果你要捆绑你的x.js(使用-r开关),有几个选项
1)在你的html页面中获取脚本并单独捆绑.
创建一个main.js文件并将其放入其中.
使用 browserify -x ./x.js > main.js
通过使用-x开关,Browserify将链接您的bundle.js作为依赖.
然后引用页面中的两个JS文件.
2)使用Browserify生成的名称.
var x = require('0+DPR/');
请参阅上面的更新以创建别名.
以下是很好的资源,因为您希望与Gulp进一步合作
有关更多Gulp + Browserify(使用Watchify以及livereload)查看Viget上的博客文章