加载浏览器边界.js带有 require.js



我们有使用require的框架.js 我们正在加载如下包

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

现在我们能够使用实用程序文件。

现在我们有一个新的js文件,它是浏览器化和丑陋的

browserify main.js | uglifyjs > bundle.js

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

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

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

但是捆绑包是空的(在调试它时...

知道如何使用 require.js 加载浏览器fiy 文件吗?

我知道在 broswerify 的文档中,我们应该像这样添加它

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

但是我们使用require.js来加载模块,并且我能够使用其他js文件执行此操作... 例如,如果我将此文件保存在我的项目中

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

我可以加载它.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) {

而且它不起作用...我在这里错过了什么?

编辑2

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

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

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

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

使用 UMD 包装器后,您的捆绑包将检测到它在 AMD 环境中运行(因为 RequireJS 使define可用(,并将调用define将自身注册到 RequireJS 作为模块。

最新更新