logo标签列表

使用gulp中的browserify如何在浏览器中暴露'require'？

javascriptnode.jsgulpbrowserify
8
当我有一个文件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中使用vinyl-source-stream运行此代码。我尝试在gulpfile中做类似于以下内容的操作，但它不起作用。有任何想法吗？我收到错误消息“require未定义”。

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。哪一个才是你真正想要的呢？ - loganfsmyth
让我们假设我执行了适当的mv bundle.js命令，将其放在Web服务器访问的正确位置。这不是问题的关键所在。 - asolberg
希望这个github项目能够帮到你。它展示了如何引用和导出库，包括html、gulp文件等。 - ehsk
2个回答
7

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

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

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

注意：如果您在像fs或through这样的节点模块上使用了-r开关，则不需要为这些模块创建别名，因为它们通常在其package.json文件中有一个名称。

有关更多信息，请参见node-browserify -- external requires。

如果你要像这样捆绑你的 x.js（使用 -r 开关），有几个选项：
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 - 将 Nodejs 模块带到浏览器中

如果想了解更多关于 Gulp + Browserify（同时使用 Watchify 实现实时刷新）的内容，请查看 Viget 上的博客文章。

4

实际上，除了两个方面，您已经非常接近了：

  1. 您需要使用可用于稍后 require() 的公开名称公开您的 'x.js'，例如：在您的情况下，选择 'x' 是一个不错的选择

  2. 而不是 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文件对象上工作的转换（而不是vinyl-source-stream产生的流式vinyl文件对象），那么你必须记得在后面加上vinyl-buffer管道。

vinyl-transform所做的就是为你同时处理缓冲和流式的vinyl文件对象。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接