Как я могу связать файлы JavaScript в /vendor в проекте ember-cli?

Question

Допустим, у меня есть библиотека ES6 "Foo" под моим /vendor каталог в проекте EmberJS, построенном с использованием последних ember-cli (на момент написания этой статьи 2.4.3). Предположим, что foo - это библиотека с несколькими файлами, например bar.js, baz.js и т. д. и все они что-то экспортируют.

Я хотел бы взять vendor/foo/bar.js, vendor/foo/baz.js и т. д. и объединить их в дистрибутивный файл, например vendor/foo/dist/foo-bundle.js что я могу затем импортировать в Ember с:

app.import("vendor/foo/dist/foo-bundle.js");

Это выглядит так, как будто это возможно с помощью упаковщика и / или транспилятора (например, Babel), но мне не ясно, какие инструменты я должен использовать и в какой комбинации. Есть ли в Ember встроенный инструмент для выполнения того, что я хочу, через ember-cli (если он есть, я должен быть слепым)? Должен ли я использовать внешний пакет, такой как веб-пакет, браузер или накопительный пакет?

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

---

Некоторые заметки, которые могут быть полезны...

Пока что я попробовал несколько вещей:

Я пытался просто импортировать main.js file, в надежде, что EmberJS также будет обходить дерево зависимостей и импортировать любые другие файлы, на которые есть ссылки в import заявления. Это только импортировало main.js файл и никаких других зависимостей.

Я посмотрел на broccoli-es6modules и имел ошибки при его запуске, но он также использует эсперанто, который устарел в пользу накопительного пакета.

Я также пытался использовать накопительный пакет напрямую, с небольшим успехом, но часто мой bundle.js вывод пустой и не содержит код из bar.js или же baz.js потому что я только импортировал их в точке входа (например, main.js):

main.js
-------
import bar from './bar.js';
import baz from './baz.js';

bar.js
------
export default function bar() {
  ...
}

baz.js
------
export default function baz() {
   ...
}

Я нашел, если мой main.js включает в себя функцию, которая вызывает любой код из bar или же baz Я получаю больше, чем пустой пакет, но если foo - это просто набор скриптов от стороннего поставщика, у которого нет "точки входа в приложение", кроме того, что представляет собой нечто вроде файла манифеста, то накопительный пакет кажется неправильным выбором за то, что я ищу.

Еще раз спасибо!

Answer 1

Есть несколько вариантов.

1. Если baz.js а также bar.js ваши собственные модули и код, лучше всего, если вы просто разместите их в app/my-awesome-module папка. Вы можете использовать импорт ES6 для импорта в другое место, где вы хотели бы их использовать. Ember CLI автоматически переносит, объединяет и минимизирует их.

2. Если вы хотите использовать сторонние модули или решения, посетите http://emberobserver.com/, большинство популярных библиотек уже преобразованы в Ember Addon, поэтому вы можете установить их с ember install,

3. Если ваша любимая библиотека имеет только пакет npm, вы можете использовать ember-browserify, https://github.com/ef4/ember-browserify Таким образом, вы можете импортировать проект в свой файл следующим образом: import MyCoolModule from "npm:my-cool-module";

4. Там может быть пакет, который вы можете установить с bower, в этом случае вы должны выполнить следующие шаги: http://ember-cli.com/user-guide/

На самом деле, папка вендора есть, но лучше, если вы ее никогда не используете. Все ваши внешние зависимости должны быть установлены как Ember Addon (лучший) или npm (хороший) или как пакет bower (хорошо). Ember CLI автоматически объединит эти зависимости должным образом, так что вам не нужно о них беспокоиться.

Удачи!;)