Ember.js: Как поделиться зависимостями файла JSON пакета с дочерними движками и надстройками

Question

В основном мне нужно знать, как Ember Js может делиться зависимостью файла родительского приложения package.json (xyz: 3.0.0) с дочерним движком и аддонами, не используя его снова в дочернем движке и файле дополнения package.json. Так что я могу уменьшить размер приложения.

На данный момент в нашем приложении мы устанавливаем общую зависимость пакетов во всех наших дочерних движках и аддонах, хотя мы использовали в родительском приложении, что увеличивает размер приложения.

Вот мой четкий пример сценария моего проекта.

parentApp (xxx): в котором есть файл package.json, который содержит несколько зависимостей, например ex: vendor-package1: 10.0.0, vendor-package2: 4.0.0, Child Engine1 (yyy), Child Engine2 (zzz)

Child Engine1 (yyy) В файле package.json есть несколько зависимостей, например ex: vendor-package1: 10.0.0, vendor-package2: 4.0.0

Child Engine2 (zzz) В файле package.json есть несколько зависимостей, например ex: vendor-package1: 10.0.0, vendor-package2: 4.0.0

Так что есливы замечаете, что родительское приложение и дочерние движки имеют одинаковую зависимость (vendor-package1: 10.0.0, vendor-package2: 4.0.0), которую мне нужно выполнить npm для всех трех приложений. Я добавляю (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

Я установил демо-версию ember 3.12 на https://github.com/bartocc/so-58343095.

Это приложение зависит от ember-concurrency , а также имеет дополнение in-repo core, которое зависит от ember-concurrency.

Я также добавил ember-cli-bundlesize, чтобы помочь проанализировать размер пакета встроенного приложения.

Вот результаты 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

$ 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,89 КБ и 170,08 КБ, состоит из:

• 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, в зависимости от того, какое дополнение вы используете, но вы можете использовать это демонстрационное приложение в качестве отправной точки, чтобы проверить, является ли какой-то код реальным. дублируется или нет.

Надеюсь, это поможет

Answer 2

Обновление в ответ на обновленный вопрос 11/12/19

Краткий ответ: вы не можете сделать каждую из ваших зависимостей только частью package.json вашего приложения. То, что у вас есть, где вы указываете каждую зависимость в каждом дополнении и package.json приложения, является правильным.

Npm установит только одну версию каждого пакета. Это делает некоторую сложную «магию», чтобы решить, какая зависимость используется. Если вы подумаете об этом, это единственное, что может произойти, потому что JS и браузер могут иметь только одну версию каждой библиотеки, так как все это доступно глобально в окне. Ваше приложение теперь может определить разницу между версией x.x.x библиотеки и x.x.y одной и той же библиотеки, потому что эта библиотека всегда имеет одно и то же имя, например, Ember.

Оригинальный ответ

Мы добились определенных успехов в сокращении пакетов, установленных с помощью lerna и моно-репо: https://github.com/lerna/lerna. Обратите внимание, однако, что мы не добились успеха при использовании команд lerna. Вместо этого мы просто запускаем npm i в каждом дополнении / приложении. Порядок npm i запускается крайне важно: сначала вы должны начать с базы своего дерева, т. Е. Начать с аддона, который не использует другие ваши дополнения / приложения, и двигаться вверх.

НашМоно репо содержит три приложения 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 необходимо запустить в следующем порядке: addon-1, addon-2 и app-1, app-2 иapp-3.

Мы экспериментировали с различными способами включения пакетов в package.json каждого дополнения / приложения. Это сводится к этому, пример для app-2:

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

file: позволяет вам ссылаться на модуль в вашем моно репо, используя относительный путь.