从 gulp 中使用 browserify 时如何向浏览器公开“要求"?

2022-01-12 00:00:00 node.js javascript gulp browserify

当我有一个看起来像这样的文件 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:所有帖子

相关文章