Question

所以我遇到了一个有趣的用例，我正在使用Browserify将我的所有资产捆绑在一个项目中，但需要在某个项目中加载大型外部（项目外部）模块。访问-app窗口。（这是一个视频播放器模块，由三个脚本组成，在需要时异步拉入。）

目前，如果在Browserified uncalled object文件之前加载了requireJS模块，我会从app.js错误中收到各种错误，如果在cannot find module错误> 之后的浏览器化代码。

无论如何我可以让Browserify和RequireJS在同一页面上很好地玩吗？我正在失去理智！

Answer 1

TL; DR - 在您的浏览器化脚本中使用window.require。

也许这对某人有帮助。我碰巧使用了一个“外部”＆＃39;基于dojo的库完全基于requireJS风格的AMD，这绝对不是 - ＆＃34; browserifyeble＆＃34;并且不可转换为CommonJS或任何理智。我自己的代码完全是浏览器化的。它的工作正常如下：

在浏览器化脚本之前加载AMD加载程序（定义全局require函数）：

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

在您自己的js中，调用require对象上的window功能（＆＃39;因为您将拥有本地浏览器 - require影响全局一个）
```
window.require(['dojo/dojo'], function (dojo) { ... });
```
＆＃39;外部＆＃39;应用程序或库，它自己调用require来加载子模块等，工作得很好，因为代码不在浏览器上下文中，全局require不会在那里被遮蔽。

也许如果您有一些纯粹的标准RequireJS模块，您可以某种方式将它们转换为可浏览，但在我的情况下，这不是一个选项。

Answer 2

有一个名为browserify-derequire的工具可以通过重命名browserify的require statmenets来解决此问题，以避免命名冲突。

可以使用以下命令安装npm：

npm install -g browserify-derequire

通过将构建命令更改为：

，将其用作browserify插件

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

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

Answer 3

对于gulp友好解决方案（类似于@ Cride5建议的那样），您可以使用gulp-derequire插件。

docs的基本示例：

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模块，因此支持所有选项。

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

3 个答案: