0

短版:我正在更新一些旧库以尝试以 AMD/requirejs 格式获取它们以进行管理,但其中一些依赖于旧代码。

主要问题:我主要对在以下内容中列出的内容感到困惑:

define(['what','goes','here'],function('what','needs','to','be','here'){}) 

以及在处理 AMD 和非 AMD 工具的组合以及 jquery-ui 和 jquery 插件之类的东西时,shim 依赖项列表中的内容。

附加信息

问题:

其中一个较旧的库依赖于 jquery-ui(和旧版本)的 .draggable(),一些旧版本的 jquery 插件称为“onScreen”,一个称为 spin.js 的微调器模式 - 所有这些都不是 AMD 友好的. (我还实现了对 AMD 友好的 dropzone 新版本的更新)其中两个较旧的库还使用一个名为 vex 的模态库,它需要 vex.dialog 的依赖项。现有网站有一个被丑化的旧版本。

我试图不完全修改此代码,因为长期目标是完全删除这些依赖项,但我现在可能没有时间弄清楚它们在做什么。

我已经尝试了我能想到的 define(['list','of','stuff']) 的所有组合,但是一些库,如 spin (class Spinner)、vex/vex.dialog 和 onScreen 仍然没有' t 始终正确加载。(有时我得到一个,然后又失去另一个)

我可以定义一个 shim 并在定义中包含 AMD 模块列表吗?如果是这样,我是否在 require.config 的 shim 中包含 AMD 依赖项列表?什么去哪里,为什么?

我的图书馆:

ImageSelector (requires AwsHelper, Utilities and ImageLayout below)
  -- uses jquery (AMD), dropzone (AMD) and an old jquery plugin called jquery.onscreen.js (non-AMD)
  -- depends on vex and vex.dialog (non-AMD)
  -- uses .draggable() from old jquery-ui (non-AMD)
  -- calls a global function 'loadSpinner' which uses spin.js (non-AMD -- see Utilities below)

ImageLayout (requires AwsHelper and Utilities - has attached instance of ImageSelector as a property .selector for methods that work in conjunction with the selector)
  -- uses jquery (AMD)
  -- also utilizes vex/vex.dialog (non-AMD)

Utilities
  -- I'm trying to move the loadSpinner() function that requires spin.js (class Spinner, non-AMD) into this
  -- I've managed thus far to avoid dependencies on things like jquery in this by refactoring code

长版:

我正在尝试更新一些网站代码以使用 require.js 进行依赖管理并使代码更具可移植性。但是我遇到了一些对似乎没有为 AMD 做好准备的旧代码的依赖。在可能的情况下,我会尝试用更新的代码替换这些代码和/或完全替换它们的功能,但在许多情况下,代码被缩小了,很难快速掌握它在做什么。我没有陷入试图找出并替换或更新这些东西的细枝末节,而是阅读了在某些情况下如何使用“垫片”来处理这些类型的非 AMD 代码,但我仍然不清楚如何配置它们。

这就是我所拥有的……我已经更新了三个库,并创建了一个新库。一个名为“ImageSelector”的软件构建了一个 web-gui 以允许使用 dropzone 上传文件。(我更新它的原因是我将它从使用本地文件系统转换为使用 Amazon AWS S3 存储。)第二个称为“ImageLayout”处理创建用户选择的照片产品布局的业务逻辑。(ImageSelector 分为两帧,左边一帧用于上传用户文件并将其分类到文件夹中,右边一帧用于构建布局。因此 ImageSelector 依赖于 ImageLayout)

第三个库是我创建的一个库,其中包含在整个网站上使用的许多重复使用的“实用程序”功能。在全局范围内有一个现有的结构化代码版本,只有一个函数列表,如 roundPrecision()、sanitizeFilename()、escapeRegex()、baseName() 等。我打算用静态方法构建它,但后来意识到如果我生成它的实例,我可以自定义它(例如,我可以使用全局实例参数为不同的应用程序更改字符“清理”)新的是 AwsHelper,这不是问题,因为它是全新的代码并处理所有与亚马逊 AWS 和 S3 的交互。它以 define() AMD 格式创建,而其他我已转换为 define()/export 格式。

无论如何,ImageLayout 的某些功能可以被订单系统独立使用,但大多数情况下,它是作为 ImageSelector 的依赖项使用的。AwsHelper 主要由 ImageSelector 使用,但 ImageLayout 中有两个函数使用它。以上所有内容都使用 Utilities 库。

我的猜测在配置中是这样的(以 ImageSelector 为例,但我想知道“jquery”和“dropzone”是否需要在其中或函数定义或两者兼而有之?)

shim: {
        "ImageSelector": {
            deps: ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen"]
        }
    }

其他 require.js 语义问题:

(如果需要,我会单独发布这些,但它们可能是简短的答案和相关的)

有什么地方可以显示 require.js 如何搜索文件吗?例如,我了解 r.js 用于丑化,但在某些情况下,我无法追踪这些东西的原始代码。文件名是否可以在结尾或版本号上包含 .min.js 并且 require.js 仍然可以找到它们,或者我应该重命名和/或符号链接文件吗?例如 jquery.js 与 jquery-1.7.min.js 之比。

上面引用的 spin.js 实际上包含一个名为“Spinner”的类定义。我如何在 config/shim 中表示它?

4

1 回答 1

0

好吧,我根据我过去 3 天的实验发布了这个,其中充满了失败,期待更多的麻烦。但显然,shim 很简单,并且在多个地方拥有所需的库(shim 定义和定义([]))不是问题。

我通过 require.js 上的示例盲目猜测并想出了这个配置,令人惊讶的是它第一次尝试就成功了!(这让我很紧张,因为这是自从尝试将它导入到 require.js 以来我第一次让这段代码没有错误地工作)

这是我想出的:

requirejs.config({
    "baseUrl": "/js/lib",
    "paths": {
        "ImageSelector"  : "../awsS3/ImageSelector",
        "ImageLayout"    : "../awsS3/ImageLayout",
        "AwsHelper"      : "../awsS3/AwsHelper",
        "Utilities"      : "../awsS3/Utilities"
    },
    "shim": {
        "jquery.onscreen": {
            "deps": ['jquery'],
            "exports": 'jQuery.fn.onScreen'
        },
        "jquery-ui" : ['jquery'],
        "vex.dialog" : ['jquery','vex'],
        "vex" : ['jquery'],
        "spin" : {
            "exports": "Spinner"
        },
        "aws-sdk" : {
            "exports" : "AWS"
        },
        "Utilities": ["spin"],
        "AwsHelper": ["jquery","aws-sdk"],
        "ImageSelector": {
            "deps" : ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen","ImageLayout","AwsHelper","Utilities"]
        },
        "ImageLayout": {
            "deps" : ["jquery","vex","vex.dialog","Utilities"]
        }
    }
});

我还注意到一些版本命名是在路径中处理的,因此我只是在路径中命名了我的库并完全摆脱了我的“app/”目录引用。

于 2020-01-07T17:57:27.797 回答