如何使用browerify-shim正确地填充jquery / Backbone

How to properly shim jquery / Backbone using browerify-shim

本文关键字:jquery Backbone 填充 正确地 何使用 browerify-shim      更新时间:2023-09-26

我正在尝试构建一个使用骨干/jquery的独立JS库。下面是一个示例repo,它代表了我试图构建的lib。

我对这个库有几个目标:

  1. 不要暴露任何全局变量(即正确包装所有内容,以免泄漏)
  2. 不要受到任何其他包工具的影响,比如requireJS
      这个库可以加载到任何其他网站,我不希望与JS的任何冲突,可能在那里(这是超出我的控制),如requireJS

因此,我的理解是,我可以使用browserify-shim来正确地填充这些模块,以便它们可以在browserify中与require一起使用。我很确定垫片应该在包装这些模块时取消definesrequire,这将实现目标#2。只要按预期使用browserify,目标#1就有望实现。

我真的不能让这个工作,我不确定这是否只是我对browserify-shim的误解。无论我是否从命令行运行browserify: browserify src/main.js -o build/main.js或使用gulp构建,我似乎都有同样的问题。

基本上,就好像browserify-shim甚至没有运行。如果您打开index.html,您可以看到我加载的requirejs代码肯定影响我的lib,因为Backbone只是一个空对象,然后requirejs崩溃。

你可以看到我的包裹。Json文件,大致如下所示:

{
...
"browserify-shim": {
    "./node_modules/jquery/dist/jquery.js": "$",
    "./node_modules/underscore.js": "_",
    "./node_modules/backbone.js": {
      "exports": "Backbone",
      "depends": [
        "./node_modules/underscore.js",
        "./node_modules/jquery/dist/jquery.js"
      ]
    }
  },
  "devDependencies": {
    "browserify": "^4.1.11",
    "browserify-shim": "^3.6.0",
    "gulp": "^3.8.1",
    "vinyl-source-stream": "^0.1.1"
  },
  "dependencies": {
    "backbone": "^1.1.2",
    "jquery": "^1.11.0",
    "underscore": "^1.6.0"
  }
}

不知道我错过了什么,但我运气不好。我想知道是否有人可以帮助或至少证实我试图实现的browserify-shim是正确的和可能的。

谢谢。

编辑

为了说明它绝对不会使模块闪烁,我创建了一个完全相同的build/main.jsbuild/main-shimmed.js。main.js我在没有shim配置的情况下运行,而shimmed的配置具有上述配置。

在这种情况下,Browserify和Browserify-shim正在工作,并且您的main.js正在调用正确的require。

你遇到的问题是你正在捆绑的库也试图连接AMD风格配置。你的"过河",当心戈泽。

要么获取没有AMD配置加载器的版本,要么将它们注释掉