Как использовать сторонние пакеты npm с приложением ember cli

обновление: я получил это, чтобы работать намного лучше и прямо вперед! Благодаря комментарию @j_mcnally!

оставит первый ответ там, чтобы все могли видеть, какие проблемы я исходил от:)

что я сделал:

bower install crypto-js=svn+http://crypto-js.googlecode.com/svn/#~3.1.2 --save

в файле Brocfile.js Я мог бы просто сделать app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');

нет ручной загрузки или перемещения файлов, просто управление зависимостью, намного лучше решение!

но, честно говоря, это было все еще много vodoo! Пока не нашел документы... сладкий: http://bower.io/docs/api/#install

старый подход

я получил это на работу, но я не могу сказать, насколько это красиво или правильно. Включая сторонние пакеты или библиотеки с ember cli довольно далеко от прямого или самостоятельного объяснения.

ресурсы, которые привели меня к моему рабочим решением были:

• как использовать сторонний javascript из ember-cli route
• https://github.com/stefanpenner/ember-cli/issues/757

следующие шаги, которые я предпринял, чтобы заставить его работать:

• я вручную загрузил библиотеку https://code.google.com/p/crypto-js/downloads/detail?name=CryptoJS%20v3.1.2.zip и расстегнул его
• I вручную создал каталог в моем каталоге поставщика:mkdir vendor/crypto-js
• я добавил app.import('vendor/crypto-js/hmac-md5.js'); до
• добавил "CryptoJS" до "predef" ключ в

затем сборка работала, и я мог в конечном итоге использовать библиотеку.

к сожалению, я не получил пакет npm для работы! Мне пришлось вручную загрузить zip-файл, распаковать его и переместить в правильное место, и если версия изменится, она не находится под какой-либо версией / зависимостью управление... Я не буду отмечать это как ответ, так как это меня совсем не удовлетворяет, но, по крайней мере, я хотел поделиться тем, что я сделал, чтобы это сработало для меня.

как описывает Timm, использование browserify получает код, введенный в ваше приложение ember. Однако у меня возникли проблемы с использованием инъекционного модуля. Для этого мне пришлось фактически создать модуль с New прежде чем я смог его использовать:

для импорта модуля NPM.

1) установить browserify:

npm install ember-browserify --save-dev

2) установите свою модель:

npm install my-module --save-dev

3) импортируйте ваш модуль в ваш файл ember интерес (app / controller / post.в JS):

import Module from 'npm:my-module';

4) используйте модуль из вашего кода, создав модуль с New:

var output = new Module(var1, var2, etc.);

как заявил Морра Пабло на комментарий на сообщение simplabs "использование библиотек npm в Ember CLI", модули НПМ третьей стороны можно импортировать на Эмбер.js от версии 2.15 сразу без потребности аддонов или завертчиц:

https://www.emberjs.com/blog/2017/09/01/ember-2-15-released.html#toc_app-import-files-within-node_modules

к сожалению, документация по-прежнему на работе и не говорится, что модули npm можно импортировать, только bower и vendor:

https://github.com/emberjs/guides/issues/2017 https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/

я получил 2 решения для импорта сторонних модулей npm непосредственно на Ember.js из документация ember CLI об управлении зависимостями, хотя он также устарел и говорит, что npm модули не могут быть импортированы, только bower и vendor:

модуль npm как стандартный анонимный актив AMD

https://ember-cli.com/managing-dependencies#standard-anonymous-amd-asset

AMD: определение асинхронного модуля

я предпочитаю и использую этот способ, потому что он избегает глобальных переменных и следует за import съезд Тлеющий уголек.js.

ember-cli-build.js:

app.import('node_modules/ic-ajax/dist/amd/main.js', {
  using: [
    { transformation: 'amd', as: 'ic-ajax' }
  ]
});

amd - тип применяемого преобразования и ic-ajax - имя модуля, которое будет использоваться при импорте в файл javascript.

на Эмбер.JS javascript файл (маршрутизатор, компонент...):

import raw from 'ic-ajax';
// ...
icAjaxRaw( /* ... */ );

raw модуль, экспортируемых ic-ajax.

вот как это работало для меня, хотя документация Ember CLI показывает import другой не работал на меня, возможно, из-за конкретного пакета, который я импортировал:

import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );

модуль npm как глобальная переменная

https://ember-cli.com/managing-dependencies#standard-non-amd-asset

ember-cli-build.js:

app.import('node_modules/moment/moment.js');

на Эмбер.JS javascript файл (маршрутизатор, компонент...):

/* global moment */
// No import for moment, it's a global called `moment`

// ...
var day = moment('Dec 25, 1995');

/* global moment */ это аннотация для ESLint не показывать ошибку при построении проекта, потому что moment() не определено в файле.

стандартный модуль npm с именем AMD Asset

https://ember-cli.com/managing-dependencies#standard-named-amd-asset

Ember CLI также показывает третий вариант, который не работал на меня, может быть, из-за конкретного пакета я был импорт:

ember-cli-build.js:

app.import('node_modules/ic-ajax/dist/named-amd/main.js');

на Эмбер.JS javascript файл (маршрутизатор, компонент...):

import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );

модуль npm как модули AMD JavaScript

https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/#toc_amd-javascript-modules

путь, описанный на Эмбер.документация js об управлении зависимостями не работает для мне либо, возможно, из-за конкретного пакета, который я импортировал:

ember-cli-build.js:

app.import('node_modules/ic-ajax/dist/named-amd/main.js', {
  exports: {
    'ic-ajax': [
      'default',
      'defineFixture',
      'lookupFixture',
      'raw',
      'request'
    ]
  }
});

на Эмбер.JS javascript файл (маршрутизатор, компонент...):

import { raw as icAjaxRaw } from 'ic-ajax';
//...
icAjaxRaw( /* ... */ );

хотя это старая нить, я думал, что внесу свой вклад, поскольку я потратил некоторое время на это. Конкретный пакет я пытался ссылку на Эмбер 'd3plus и пришлось сделать множество вещей, чтобы заставить его работать.

1. npm install ember-browserify --save-dev
2. npm install d3plus --save-dev
3. ember install ember-cli-coffeescript
4. npm install --save-dev coffeeify coffeescript

тогда в вашем компоненте сделайте import d3plus from 'npm:d3plus';

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