从 gulp 中使用 browserify 时如何向浏览器公开“要求”？答案

【问题标题】：How to expose 'require' to the browser when using browserify from within gulp?从 gulp 中使用 browserify 时如何向浏览器公开“要求”？
【发布时间】：2014-06-20 14:32:17
【问题描述】：

当我有一个看起来像这样的文件 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) 我实际上想使用乙烯基源流在 gulp 中运行它。我试过在我的 gulpfile 中做这样的事情，但它不起作用。有任何想法吗？我收到错误“未定义要求”

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

【问题讨论】：

在您的命令行示例中，您将bundle.js 写入与x.js 相同的文件夹中，但您的HTML 正在从static/bundle.js 读取它，而在您的gulp 示例中您正在编写发给build/bundle.js。哪一个才是你真正想要的？
假设我执行了适当的 mv bundle.js 命令，将它放在正确的位置以供网络服务器访问。这不是问题的症结所在。
希望github project 会有所帮助。它展示了如何请求和导出库、html、gulp 文件等。

标签： javascript node.js gulp browserify

【解决方案1】：

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

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

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

注意：如果您在 fs 或 through 之类的节点模块上使用了 -r 开关，则不需要为这些模块设置别名，因为它们通常有名称在他们的 package.json 文件中。

请参阅 node-browserify -- external requires 了解更多信息。

如果你要像这样（使用 -r 开关）捆绑你的 x.js，有几个选项

1) 将脚本放入您的 html 页面并单独捆绑。

创建一个 main.js 文件并将您的 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

【讨论】：

【解决方案2】：

其实你们已经很接近了，除了两件事：

您需要使用公开名称公开您的 'x.js'，以便稍后用于 require()，例如：'x' 在您的情况下是一个不错的选择
你应该使用require('x');而不是require('./x.js');

所以给你完整的答案：

在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-source-stream放弃）

vinyl-transform 的作用是为您处理缓冲和流式传输的乙烯基文件对象。

【讨论】：