使用 require.js 加载 browserify boundle.js

Question

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

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

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

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

一样经过 browserify 和 uglify

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文件来加载模块... 例如，如果我将此文件保存在我的项目中

我可以用 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 环境中检测到它不是运行时将使用的名称。在这种情况下，它会将您的包导出为全局 space 中的符号 someName。你必须决定你想在那里使用什么名字。

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

Load browserify boundle.js with require.js