javascript - Ember.js:如何将包 JSON 文件依赖项共享给子引擎和插件

Question

基本上我需要知道Ember Js如何将父应用程序package.json文件依赖项(xyz:3.0.0)共享给子引擎和插件，而无需在子引擎和插件package.json文件中再次使用。这样我就可以减小应用程序的大小。

到目前为止，在我们的应用程序中，我们在所有子引擎和插件中安装了通用的包依赖项，即使我们在父应用程序中使用它会增加应用程序的大小。

这是我的项目场景的清晰示例。

父应用程序(xxx): 其中 package.json 文件包含很少的依赖项，例如:vendor-package1:10.0.0、vendor-package2:4.0.0、Child Engine1(yyy)、Child Engine2(zzz)

子引擎1(yyy) 其中 package.json 文件包含很少的依赖项，例如:vendor-package1:10.0.0、vendor-package2:4.0.0

子引擎2(zzz) 其中 package.json 文件包含很少的依赖项，例如:vendor-package1:10.0.0、vendor-package2:4.0.0

因此，如果您注意到父应用程序和子引擎具有相同的依赖项(vendor-package1:10.0.0、vendor-package2:4.0.0)，我需要为所有三个应用程序执行 npm install 。我将 (vendor-package:10.0.0,vendor-package2:4.0.0) 添加到我的所有子引擎中，因为它应该可供我的引擎使用。

因此，我的 dist 文件夹包含(vendor-package1:10.0.0、vendor-package2:4.0.0)到我的所有parentApp 和引擎，这些文件夹的大小会增加。

如果我仅将(vendor-package1:10.0.0，vendor-package2:4.0.0)添加到我的parentApp(xxx)中，那么我的子引擎无法访问vendor-package1和vendor-package2内的这些组件。

请建议一些我不想为所有应用程序添加依赖项的解决方案。

Answer 1

我已经在 https://github.com/bartocc/so-58343095 设置了一个演示 ember 3.12 应用程序.

此应用程序依赖于 ember-concurrency并且还有一个依赖于 ember-concurrency 的仓库内插件 core。

我还添加了 ember-cli-bundlesize 来帮助分析构建的应用程序的包大小。

以下是添加 in-repo 插件之前和之后 ember bundlesize:test 的结果。

之前

$ git checkout 6c5dfc7
$ ember bundlesize:test
ok 1 - app:javascript: 165.89KB <= 500KB (gzip)
ok 2 - app:css: 40B <= 50KB (gzip)

之后

$ git checkout 9c9c9a9
$ ember bundlesize:test
ok 1 - app:javascript: 165.89KB <= 500KB (gzip)
ok 2 - app:css: 40B <= 50KB (gzip)
Bundlesize check was successful. Good job!

如您所见，包大小没有改变。

<小时/>

对于仓库内引擎也是如此:

使用依赖于ember-concurrency的 repo 引擎

$ git checkout 2662b63
$ ember bundlesize:test
ok 1 - app:javascript: 170.08KB <= 500KB (gzip)
ok 2 - app:css: 40B <= 50KB (gzip)
Bundlesize check was successful. Good job!

您在 165.89KB 和 170.08KB 之间看到的微小差异是由以下因素组成的:

• ember-engines 模块:

;define("ember-engines/-private/engine-ext")
;define("ember-engines/-private/engine-instance-ext")
;define("ember-engines/-private/route-ext")
;define("ember-engines/-private/router-ext")
;define("ember-engines/components/link-to-component")
;define("ember-engines/components/link-to-external-component")
;define("ember-engines/engine")
;define("ember-engines/initializers/engines")
;define("ember-engines/routes")

• my-engine 模块:

;define("my-engine/config/environment")
;define("my-engine/engine")
;define("my-engine/resolver")
;define("my-engine/routes")
;define("my-engine/templates/application")

最后，ember-concurrency 模块别名可在 my-engine 解析器中使用:

;define.alias("ember-concurrency/helpers/cancel-all", "my-engine/helpers/cancel-all");
;define.alias("ember-concurrency/helpers/perform", "my-engine/helpers/perform");
;define.alias("ember-concurrency/helpers/task", "my-engine/helpers/task");
;define.alias("ember-concurrency/initializers/ember-concurrency", "my-engine/initializers/ember-concurrency");

YMMV 取决于您使用的插件，但您可以使用此演示应用程序作为起点来检查某些代码是否确实重复。

希望这有帮助