首页 文章

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

提问于
浏览 次
9

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

目前，如果在Browserified app.js 文件之前加载了requireJS模块，我会收到来自 uncalled object 错误的各种错误，如果在Browserified代码之后加载，则会出现 cannot find module 错误 .

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

javascript requirejs amd browserify

3 回答

  • 3

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

    也许它仍然可以帮助某人 . 我碰巧使用完全基于requireJS风格的AMD的“外部”基于dojo的库，这绝对不是“可浏览的”并且无法转换为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中，调用 window 对象上的 require 函数（'cause you' ll有一个本地browserify- require 遮蔽全局对象）
    window.require(['dojo/dojo'], function (dojo) { ... });
    • 'external'应用程序或库，它自己调用 require 来加载子模块等，工作正常，因为代码不在浏览器上下文中，并且全局 require 没有被遮蔽 .

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

    回复于
  • 9

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

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

    npm install -g browserify-derequire

    通过将构建命令更改为：将其用作browserify插件：

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

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

    回复于
  • 2

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

    回复于

相关问题