Question

当我有一个看起来像这样的文件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'));

Answer 1

更新：您可以在-r开关中引用别名

尝试：browserify -r ./x.js:my-module > bundle.js

在您的信息页中：var x = require('my-module');

注意：如果您在节点模块上使用-r开关（如 fs 或至），则不需要别名，因为它们通常具有名称在他们的package.json文件中。

有关详细信息，请参阅 node-browserify -- external requires 。

如果要打包你的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

的 Browserify - Bring Nodejs modules to browsers

更多Gulp + Browserify（使用Watchify以及livereload）查看Viget上的博客文章

的 Gulp + Browserify: The Everything Post

Answer 2

实际上你非常接近，除了两件事：

您需要向'x.js'公开一个可以用来要求（）的公开名称，例如：'x'在您的情况下是个不错的选择
< / LI>
而不是require('./x.js');您应该require('x');

所以给你完整的答案：

lib/x.js

module.exports = function (n) { return n * 111 }

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']);

在HTML文档（index.html）

<html>
...
<script src='dist/x.js'></script>
<script>
   var x = require('x');
   console.log(x(3));
</script>

关于gulp配方的一些细节：

我使用vinyl-transform代替vinyl-source-stream。

你可以选择使用vinyl-source-stream，但是如果你有更多的转换使用适用于缓冲的乙烯基文件对象的插件（而不是流式乙烯基文件对象），你必须记得在vinyl-buffer之后输入管道。那个vinyl-source-stream给出了）

vinyl-transform做的是它为你处理缓冲和流式乙烯基文件对象。

如何公开＆＃39;要求＆＃39;从gulp中使用browserify时到浏览器？

2 个答案: