在同一页上同时使用Browserify和RequireJS？

Question

我遇到了一个有趣的使用情况，我正在使用Browserify将项目中的所有资产捆绑在一起，但是当访问特定的应用程序窗口时需要加载一个大型的外部（对于该项目来说是外部的）模块。（这是一个视频播放器模块，由三个脚本组成，根据需要以异步方式拉取）。

目前，如果在Browserified的app.js文件之前加载requireJS模块，则会出现各种错误，如未调用对象错误。如果在Browserified代码之后加载，则会出现“找不到模块”的错误。

有没有办法让Browserify和RequireJS在同一页上协同运作？我快疯了！

- Scotty

---

尝试将打包的JavaScript代码放入一个闭包中。 - idbehold

我认为这是Browserify在捆绑文件的开头添加了一个全局require。如果不修改browserified文件，我该如何将整个导入的app.js文件包装在闭包中？ - Scotty

你有没有遇到过这个问题？我是从相反的方向来的...我的大部分应用程序都是使用requirejs编写的，但我想引入一个可在NPM上获得的单个库，并计划使用browserify包装器打包它。到目前为止还没有成功。 - Mike Griffith

这可能是对我的使用情况的致命打击：“最终，Node中的RequireJS只能加载在本地磁盘上的模块 - 例如跨HTTP获取模块目前不受支持。” http://requirejs.org/docs/node.html - Mike Griffith

你的任何模块是否在Browserify捆绑UMD模块中加载？如果页面上加载了RequireJS，这可能会导致问题，因为它可能无法导出到CommonJS，如果检测到AMD。 - cuth

Answer 1

TL;DR - 在您的browserify脚本中使用window.require。

也许这仍然可以帮助某些人。 我恰好使用了一个基于requireJS风格AMD的“外部”dojo库，它完全基于不可“browserifyeble”，不可转换为CommonJS或任何合理东西的方式。我的代码完全是Browserified的。这样做可以正常工作：

1. 在browserify脚本之前加载AMD加载器（它定义了全局require函数）：

<script src="dojo/dojo.js"></script> <!-- RequireJS/AMD loader, defining a global 'require'-->
<script src="app/main.js"></script> <!-- The Browserify bundle -->

2. 在你自己的js中，调用window对象上的require函数（因为你会有一个本地的browserify-require遮盖全局的那个）

window.require(['dojo/dojo'], function (dojo) { ... });

3. “外部”应用程序或库会自己调用require来加载子模块等，它可以正常工作，因为该代码不在browserify上下文中，全局的require没有被遮蔽。

也许如果您有一些非常好的标准RequireJS模块，您可以将它们转换为可在浏览器中使用，但在我的情况下，这不是一个选择。

- Sergey B

---

很棒的东西。这对我帮助很大。 - orcaman

非常有用的功能，可以将一个大型应用程序拆分为模块束，并实现按需加载。谢谢。 - Val Entin

Answer 2

如果你需要一个类似于@Cride5提出的gulp友好的解决方案，你可以使用gulp-derequire插件。

以下是文档中的基本示例：

var derequire = require('gulp-derequire');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('build', function() {
    var bundleStream = browserify({entries: './index.js', standalone: 'yourModule'}).bundle();
    return bundleStream
        .pipe(source('yourModule.js'))
        .pipe(derequire())
        .pipe(gulp.dest('./build'));
});

插件也基于derequire模块，因此支持所有选项。

- Olga

Answer 3

有一个工具叫做browserify-derequire，它通过重命名browserify的require语句来避免命名冲突问题。

可以使用npm安装它：

npm install -g browserify-derequire

将其作为browserify插件使用，只需更改构建命令为：

browserify src/*.js -p browserify-derequire > module.js

关于此问题还有更多讨论，请参考：https://github.com/substack/node-browserify/issues/790

- Cride5