javascript - 使用 require.js 加载 browserify boundle.js

Question

我们有与 require.js 一起工作的框架我们正在加载如下包

define(["converter/service/utils"], function (utils) {

现在我们可以使用 utils 文件了。

现在我们有了一个新的 js 文件，它像

browserify main.js | uglifyjs > bundle.js

我已将 boundle.js 文件添加到我的项目(在服务文件夹下)，我想加载它，但它不起作用...

我尝试像下面这样加载它:

   define(["converter/service/bundle"], function (bundle) {

但是包是空的(调试时...)

知道如何使用 require.js 加载 browserfiy 文件吗？

我知道在 broswerify 的文档中我们应该添加它

<script src="bundle.js"></script>

但我们使用 require.js 来加载模块，我能够使用其他 js 文件来加载模块...例如，如果我将这个文件保存在我的项目中

https://rawgit.com/hugeen/lebab-experiment/master/lebab.js

我可以用 require.js 加载它 ...

编辑:

我所做的是 npm init &

npm install lebab --save

创建文件main.js并放入以下代码

var lebab = require("lebab");

然后运行命令

browserify --standalone someName main.js | uglifyjs > bundle.js

一切顺利

将bundle.js文件放在converter/service文件夹下

并尝试像下面这样要求它:

define(["converter/service/bundle"], function (bundle) {

或者还有

define(["converter/service/someName"], function (bundle) {

它不起作用...我在这里缺少什么？

EDIT2

由于我们使用我们的工具(包装 require.js)，因此很难跟踪正确的错误，因此我使用一些工具(require.js)来验证它使用 webstoram vscode 进行一些项目调整。我只想验证捆绑是否正确创建...

Answer 1

您的包不包含允许 RequireJS 加载它的必要代码，因为默认情况下 browserify 不包含所需的代码。获得所需结果的一种方法是使用 --standalone 告诉 Browserify 放置一个 UMD wrapper在你的包周围:

browserify --standalone someName main.js | uglifyjs > bundle.js

someName 是 UMD 包装器在检测到它未在 CommonJS 或 AMD 环境中运行时将使用的名称。在这种情况下，它会将您的包导出为全局空间中的符号 someName。您必须决定要在那里使用什么名称。

有了 UMD 包装器，您的包将检测到它正在 AMD 环境中运行(因为 RequireJS 使 define 可用)，并将调用 define 进行注册本身与 RequireJS 作为一个模块。