web-dev-qa-db-fra.com

Comment utiliser les packages npm tiers avec l'application ember cli

EDIT: il s’agit en fait de tout paquet npm qui n’est pas conçu pour être utilisé avec ember. Dans mon cas, j’ai essayé de faire fonctionner crypto-js, mais il semble que ce soit toujours le même problème avec n’importe quel paquet npm qui n’a pas été spécialement conçu pour ember cli.

Je souhaite utiliser cryptoJS dans mon application ember, que je révise actuellement avec ember cli, mais j'ai beaucoup de mal à importer tous les packages et bibliothèques tiers que j'utilise déjà, comme par exemple cryptoJS.

CryptoJS a au moins un paquet pour npm, je ne veux même pas penser à ce qui se passe si certaines de mes bibliothèques incluses ne contiennent pas de paquet ...

Est-ce que je manque juste le point dans la documentation d'ember-cli ou est-ce vraiment pas décrit comment importer d'autres paquets npm et comment inclure correctement des bibliothèques non-paquetages pour les garder sous contrôle de version et contrôle de dépendance?

Si je suis la description du manuel du paquetage crypto-js:

var CryptoJS = require("crypto-js");
console.log(CryptoJS.HmacSHA1("Message", "Key"));

Je reçois et erreur dans mon ember build

utils/customauthorizer.js: line 1, col 16, 'require' is not defined.

Merci pour toute aide à ce sujet, je suis très enthousiasmé par le projet ember cli, mais importer mon application ember existante a été assez pénible jusqu'à présent ... 

MODIFIER:

Juste importer ne fonctionne malheureusement pas. 

import CryptoJS from 'crypto-js';

jette pendant la construction

daily@dev1:~/VMD$ ember build
version: 0.1.2
Build failed.
File: vmd/utils/customauthorizer.js
ENOENT, no such file or directory '/home/daily/VMD/tmp/tree_merger-tmp_dest_dir-F7mfDQyP.tmp/crypto-js.js'
Error: ENOENT, no such file or directory '/home/daily/VMD/tmp/tree_merger-tmp_dest_dir-F7mfDQyP.tmp/crypto-js.js'
    at Error (native)
    at Object.fs.statSync (fs.js:721:18)
    at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:84:46)
    at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:133:9)
    at addModule (/home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:133:9)
    at /home/daily/VMD/node_modules/ember-cli/node_modules/broccoli-es6-concatenator/index.js:59:7
    at $$$internal$$tryCatch (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16)
    at $$$internal$$invokeCallback (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17)
    at $$$internal$$publish (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:453:11)
    at $$rsvp$asap$$flush (/home/daily/VMD/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
ember.jsnpmember-cli
26
Preexo

Le plus simple et la réponse recommandée est d'utiliser ember-browserify . (comme le support pour les paquets bower sera supprimé à l'avenir. )

Ceci est un exemple d'utilisation du package npm dexie dans une application Ember CLI.

Installez browserify: npm install ember-browserify --save-dev

Installez dexie (ou le module dont vous avez besoin): npm install dexie --save-dev

Importez le module comme ceci: import Dexie from 'npm:dexie';

50
Timm

UPDATE: J'ai obtenu que cela fonctionne beaucoup mieux et directement! Merci au commentaire de @j_mcnally!

Laissera la première réponse en bas pour que tout le monde puisse voir de quel problème j'étais venu :)

Ce que j'ai fait: 

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

Dans mon fichier Brocfile.js je pourrais juste faire app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');

Pas de téléchargement manuel ni de déplacement de fichiers, gestion d'une dépendance, solution bien meilleure!

Mais honnêtement, c’était encore beaucoup de vodoo! Jusqu'à ce que j'ai trouvé la documentation ... sweet: http://bower.io/docs/api/#install

OLD approche

Cela a fonctionné, mais je ne peux pas dire à quel point cette approche est belle ou correcte. Y compris les paquets tiers ou les bibliothèques avec ember cli est assez loin d’être explicite.

Les ressources qui m'ont amené à ma solution de travail étaient:

Les étapes suivantes que j'ai prises pour le faire fonctionner:

  • J'ai téléchargé manuellement la bibliothèque https://code.google.com/p/crypto-js/downloads/detail?name=CryptoJS%20v3.1.2.Zip et l'ai décompressé.
  • J'ai créé manuellement un répertoire dans le répertoire de mon fournisseur: mkdir vendor/crypto-js
  • J'ai ajouté app.import('vendor/crypto-js/hmac-md5.js'); au fichier Brocfile.js
  • J'ai ajouté "CryptoJS" à la clé "predef" dans le fichier .jshintrc

Ensuite, la construction a fonctionné et je pourrais éventuellement utiliser la bibliothèque.

Malheureusement, je n’ai pas mis le paquet npm au travail! Je devais télécharger manuellement le fichier Zip, le décompresser et le déplacer à l'emplacement correct. Si la version change, il ne fait l'objet d'aucun contrôle de version/dépendance ... Je ne le marquerai pas comme une réponse, car cela ne me satisfait pas du moins, mais au moins je voulais partager ce que j'ai fait pour que cela fonctionne pour moi.

6
Preexo

Comme indiqué par Pablo Morra sur un commentaire du message de simplabs "Utilisation des bibliothèques npm dans Ember CLI" , des modules tiers npm peuvent être importés sur Ember. js à partir de la version 2.15 directement sans avoir besoin d'addons ni de wrappers:

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

Malheureusement, la documentation est toujours en cours et cela ne dit pas que les modules npm peuvent être importés, seulement ceux de bower et de vendeur:

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

J'ai obtenu deux solutions pour importer des modules tiers npm directement sur Ember.js à partir de la documentation CLI Ember sur la gestion des dépendances , bien qu'elle soit également obsolète et indique que les modules npm ne peuvent pas être importés. , uniquement ceux de la tonnelle et du vendeur:

module npm en tant qu'actif AMD anonyme standard

(https://ember-cli.com/managing-dependencies#standard-anonymous-AMD-asset } _ 

AMD: définition de module asynchrone

Je préfère et utilise cette méthode car elle évite les variables globales et suit la convention import de Ember.js.

ember-cli-build.js:

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

AMD est le type de transformation appliqué et ic-ajax est le nom du module à utiliser lors de son importation dans un fichier javascript.

sur le fichier javascript Ember.js (routeur, composant ...):

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

raw est un module exporté par ic-ajax.

Cela a fonctionné ainsi pour moi, bien que la documentation de l'interface de ligne de commande Ember indique la import d'une autre manière qui n'a pas fonctionné pour moi, peut-être à cause du paquet spécifique que j'importais:

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

module npm en tant que variable globale

_ { https://ember-cli.com/managing-dependencies#standard-non-AMD-asset } _

ember-cli-build.js:

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

sur le fichier javascript Ember.js (routeur, composant ...):

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

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

/* global moment */ est une annotation pour ESLint de ne pas afficher d'erreur lors de la construction du projet car moment() n'est pas défini dans le fichier.

module npm en tant qu'actif AMD standard nommé

_ { https://ember-cli.com/managing-dependencies#standard-named-AMD-asset } _

Ember CLI montre également une troisième option qui ne fonctionnait pas pour moi, peut-être à cause du paquet spécifique que j'importais:

ember-cli-build.js:

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

sur le fichier javascript Ember.js (routeur, composant ...):

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

module npm en tant que modules JavaScript AMD

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

La manière décrite dans la documentation d'Ember.js sur la gestion des dépendances n'a pas fonctionné pour moi non plus, peut-être à cause du paquet spécifique que j'importais:

ember-cli-build.js:

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

sur le fichier javascript Ember.js (routeur, composant ...):

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

bien que ce soit un vieux fil de pensée, je contribuerais comme j'ai passé un certain temps à le faire. Le paquet spécifique que j'essayais de lier à ember était «d3plus» et devait faire diverses choses pour que cela fonctionne.

  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

alors dans votre composant, faites import d3plus from 'npm:d3plus';

Pendant longtemps, j'obtenais des erreurs d'exécution lors de la recherche du coffescript et pensais que cela serait utile aux personnes qui recherchent spécifiquement d3plus.

0
algreen11