0

如果我想为Ember.js创建一个附加组件，我们称它为ember-awesome来解决这个问题，它是一个库awesome-lib.js及其扩展的包装器。如何围绕该库创建一个 shim 以及我想与它捆绑的任何扩展？

假设awesome-lib.js可以有插件或对其功能的扩展，例如awesome-ext-foo.js，awesome-ext-bar.js等。为提供 awesome-lib、awesome-ext-foo 和 awesome-ext- 的插件编写 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及其扩展

4

1 回答 1

0

好的，看来您需要先了解一些概念。每次调用define只定义一个 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-shimif 某些东西已经作为模块可用。您使用供应商 shim 将全局导出的东西作为模块提供，因为您不想在任何地方使用全局，并且可能希望将来您的依赖项可以作为模块使用。

但是，出于这个原因，绝对有可能在一个供应商 shim 中定义多个模块，如下所示：

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

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

接下来，在 app.import 期间导出的定义没有做任何事情。

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

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

于 2016-07-09T22:40:28.340 回答