ember.js js:如何共享包JSON文件依赖到子引擎和插件

1mrurvl1  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(162)

基本上,我需要知道Ember Js如何共享父应用程序package.json文件依赖(xyz:3.0.0)到子引擎和插件,而不被再次使用在子引擎和插件package.json文件中。这样我就可以减少应用程序的大小。
到目前为止,在我们的应用程序中,我们在所有子引擎和插件中安装了通用包依赖项,尽管我们在父应用程序中使用了它,但它会增加应用程序的大小。
这是我的项目场景的一个清晰的例子。
父应用程序(xxx):其中package.json文件包含一些依赖项,例如:供应商程序包1:10.0.0,供应商程序包2:4.0.0,子引擎1(yyy),子引擎2(zzz)
子引擎1(yyy),其中包含package.json文件,该文件包含一些依赖项,例如:供应商软件包1:10.0.0,供应商软件包2:4.0.0
子引擎2(zzz),其中包含package.json文件,包含一些依赖项,例如:供应商软件包1:10.0.0,供应商软件包2:4.0.0
因此,如果你注意到父应用程序和子引擎有相同的依赖关系(供应商包1:10.0.0,供应商包2:4.0.0),我需要为所有三个应用程序进行npm安装。我添加(供应商包:10.0.0,供应商包2:4.0.0)到我所有的子引擎,因为它应该对我的引擎可用。
因此,我的dist文件夹(vendor-package 1:10.0.0,vendor-package 2:4.0.0)包含了我所有的parentApp和引擎,它们的大小会增加。
如果我只将(vendor-package 1:10.0.0,vendor-package 2:4.0.0)添加到我的parentApp(xxx)中,那么我的子引擎无法访问vendor-package 1和vendor-package 2中的那些组件。
请建议一些解决方案,我不想添加依赖到我的所有应用程序。

zlwx9yxi

zlwx9yxi1#

我在https://github.com/bartocc/so-58343095上安装了一个ember 3.12的演示应用程序。
这个应用依赖于ember-concurrency,也有一个依赖于ember-concurrency的存储库内插件core
我还添加了ember-cli-bundlesize,以帮助分析构建的应用程序的捆绑包大小。
下面是添加in-repo addon前后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!

正如您所看到的,bundlesize不会更改。
这同样适用于回购引擎:

使用存储库内引擎(取决于ember-concurrency

$ 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取决于你使用的插件,但你可以使用这个演示应用程序作为起点来检查一些代码是否真的重复或没有。
希望这对你有帮助

ycl3bljg

ycl3bljg2#

更新问题11/12/19的答复

简单地说,你不能让每个依赖项都成为应用程序package.json的一部分。你在每个插件和应用程序package.json中指定每个依赖项的做法是正确的。
Npm只会安装每个软件包的一个版本,它做了一些复杂的“魔术”来解决使用哪个依赖项,如果你想一想,这是唯一可能发生的事情,因为JS和浏览器只能有一个版本的每个库可用,因为东西是在窗口上全局可用的。您的应用现在可以区分库的x.x.x版本和同一库的x.x.y版本,因为该库始终以相同的名称在全局公开,例如Ember

原始答案

通过使用lerna和mono repo,我们已经成功地减少了软件包的安装:https://github.com/lerna/lerna。但是请注意,我们使用lerna命令并没有取得任何成功。相反,我们只是在每个addon/app中运行npm inpm i的运行顺序非常关键:你必须先从你的树的底部开始,也就是说,从不消耗你的其他插件/应用程序的插件开始,然后向上移动。
我们的mono repo包含三个ember应用程序和两个插件:

addon-1
addon-2
  - consumes addon-1
app-1
  - consumes addon-1
app-2
  - consumes addon-1 and addon-2
app-3
  - consumes addon-1 and addon-2

在上面的结构中,npm i必须按以下顺序运行:第一个是第二个是第三个。
我们已经尝试了不同的方法来将软件包包含在每个插件/应用的package.json中。

"devDependencies": {
  "addon-1": "file:../addon-1",
  "addon-2": "file:../addon-2",
},

file:允许您使用相对路径引用mono存储库中的模块。

相关问题