是否可以在 Ember.js 附加 shim 中包含多个 JavaScript 库？

Question

如果我想为 Ember.js 创建一个附加组件，我们将其命名为 ember-awesome 出于这个问题的目的，这是一个库 awesome-lib.js 及其扩展的包装器。如何围绕该库创建垫片以及我想与之捆绑的任何扩展？

暂时假设 awesome-lib.js 可以为其功能添加插件或扩展，例如awesome-ext-foo.js、awesome-ext-bar.js 等。为组件编写提供 awesome-lib、awesome-ext-foo 和 awesome-ext-bar 的 shim 和附加组件的最佳方法是什么？

我想我也许可以定义一个垫片，例如vendor/shims/awesome-lib-shim.js 这样的：

// ember-awesome/vendor/shims/awesome-lib-shim.js
define("awesome-lib", [
  "awesome-lib",
  "awesome-ext-foo",
  "awesome-ext-bar"], function(awesomeLib, extFoo, extBar) {
  return {
    "default": awesomeLib,
    "foo": extFoo,
    "bar": extBar
  };
})

并在我的 ember-awesome/index.js 中使用它：

// ember-awesome/index.js
module.exports = {
  name: "ember-awesome",

  included: function(app) {
    ...
    this.app.import("vendor/shims/awesome-lib-shim.js", {
      type: "vendor",
      exports: {
        "awesome-lib": ["default"],
        "awesome-ext-foo": ["foo"],
        "awesome-ext-bar": ["bar"],
      }
    });
    ...
  }
  ...
};

虽然这似乎不起作用。当然，我总是可以创建不同的垫片，但我认为将类似组件捆绑在同一个垫片中最有意义。

一个很好的真实世界，类型库和扩展复杂性的例子我想写一个附加组件是 markdown-it and its extensions

Answer 1

好吧，看来你需要先了解几个概念。每次调用 define 都只定义 one modul.

第二个参数是一个依赖数组。那么让我们看看你的例子：

define("awesome-lib", [
  "awesome-lib",
  "awesome-ext-foo",
  "awesome-ext-bar"], ...)

这实际上定义了一个名为 awesome-lib 的模型，它依赖于三个模块：awesome-lib、awesome-ext-foo、awesome-ext-bar.

所以这个不能工作。特别是这意味着已经定义了三个模块：awesome-lib、awesome-ext-foo 和 awesome-ext-bar。但是，如果 awesome-lib 已经定义，为什么要重新定义它？

所以通常你不需要 vendor-shim 如果某些东西已经作为模块可用。您使用供应商 shim 使全局导出的东西可以作为模块使用，因为您不想在任何地方都使用全局，并且可能希望将来您的依赖项可以作为模块使用。

但是，由于这个原因，绝对可以在一个供应商 shim 中定义多个模块，例如：

define("awesome-lib", [], () => {
  return window.AwesomeLib;
})

define("awesome-ext-foo", ["awesome-lib"], awesomeLib => {
  return window.AwesomeLib.use(window.AwesomeExtFoo)
})

接下来，definition of exports during app.import is not doing anything.

然而，对于您的示例，我看不出有任何理由为此编写插件！您应该从 npm 安装它，然后使用 ember-browserify 导入它，这样它也应该适用于扩展。

但是如果你想写一个插件来提供额外的模板，我也会尽可能地依赖 ember-browserify 来安装依赖项。

是否可以在 Ember.js 附加 shim 中包含多个 JavaScript 库？

Is it possible to include multiple JavaScript libraries in an Ember.js add-on shim?

javascript

shim

ember.js

ember-cli

ember-cli-addons