Come utilizzare pacchetti npm di terze parti con l’app cli di ember

EDIT: questo è in realtà su qualsiasi pacchetto npm che non è progettato per giocare insieme a Ember. Nel mio caso, ho cercato di far funzionare crypto-js, ma sembra che si tratti sempre dello stesso problema con qualsiasi pacchetto npm non progettato appositamente per il cli di ember.

Voglio usare cryptoJS nella mia app ember, che attualmente sto rifattendo con cli di ember, ma sto avendo un sacco di problemi nell’importare tutti i pacchetti e le librerie di terze parti che sto già usando, come ad esempio cryptoJS.

CryptoJS ha almeno un pacchetto per npm, non voglio nemmeno pensare a cosa succede se alcune delle mie librerie incluse non hanno un pacchetto …

Mi manca solo il punto nella documentazione di ember-cli o non è davvero descritto come importare altri pacchetti npm e anche come includere librerie non-package correttamente per tenerle sotto controllo di versione e controllo delle dipendenze?

Se seguo la descrizione del manuale del pacchetto crypto-js:

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

Ottengo e errore nella mia ember build

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

Grazie per l’aiuto su questo, sono molto entusiasta del progetto ember cli, ma l’importazione della mia app ember esistente è stata abbastanza dolorosa finora …

MODIFICARE:

Solo l’importazione purtroppo non funziona.

 import CryptoJS from 'crypto-js'; 

getta durante la costruzione

 [email protected]:~/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) 

La risposta più semplice e consigliata è usare ember-browserify . (poiché il supporto per i pacchetti di bower verrà rimosso in futuro ) .

Questo è un esempio per usare il pacchetto dexie all’interno di dexie Ember CLI.

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

Installa dexie (o qualunque modulo tu abbia bisogno): npm install dexie --save-dev

Importa il modulo in questo modo: import Dexie from 'npm:dexie';

AGGIORNAMENTO: ho capito che funziona molto meglio e in modo diretto! Grazie al commento di @j_mcnally!

Lasceremo la prima risposta laggiù in modo che tutti possano vedere quali problemi stavo arrivando 🙂

Cosa ho fatto:

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

Nel mio file Brocfile.js potrei semplicemente fare app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');

Nessun download o spostamento manuale dei file, basta gestire una dipendenza, soluzione decisamente migliore!

Ma onestamente, era ancora molto vodoo! Fino a quando ho trovato la documentazione … dolce: http://bower.io/docs/api/#install


Approccio OLD

Ho fatto in modo che funzioni, ma non posso dire quanto sia bello o corretto questo approccio. Includere pacchetti di terze parti o librerie con Ember Cli è abbastanza lontano dall’essere diretto o auto esplicativo.

Le risorse che mi hanno portato alla mia soluzione di lavoro sono state:

I seguenti passaggi ho preso per farlo funzionare:

Poi la build ha funzionato e potrei finalmente usare la libreria.

Purtroppo non ho avuto il pacchetto npm per funzionare! Ho dovuto scaricare manualmente il file zip, decomprimerlo e spostarlo nella posizione corretta e se la versione cambia, non è sotto nessun controllo versione / dipendenza … Non contrassegnerò questo come una risposta, dal momento che non mi soddisfa a tutti, ma almeno volevo condividere ciò che ho fatto per farlo funzionare per me.

Come descrive Timm, utilizzando browserify viene iniettato il codice nell’app ember. Tuttavia, stavo avendo problemi effettivamente usando il modulo iniettato. Per farlo dovevo effettivamente creare il modulo con New prima che potessi usarlo:

Per importare un modulo NPM.

1) installa browserify:

npm install ember-browserify --save-dev

2) installa il tuo modello:

npm install my-module --save-dev

3) Importa il tuo modulo nel tuo file ember di interesse (app / controller / post.js):

import Module from 'npm:my-module';

4) usa il modulo dal tuo codice creando il modulo con New :

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

Come affermato da Pablo Morra su un commento del post di simplabs “Usando le librerie npm in Ember CLI” , i moduli npm di terze parti possono essere importati su Ember.js dalla versione 2.15 direttamente senza bisogno di addon o wrapper :

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

Sfortunatamente la documentazione è ancora in funzione e non dice che i moduli di NPM possono essere importati, ma solo quelli di bower e vendor:

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

Ho ottenuto 2 soluzioni per importare i moduli di terze parti npm direttamente su Ember.js dalla documentazione della CLI di Ember sulla gestione delle dipendenze , sebbene sia anche obsoleto e dice che i moduli di npm non possono essere importati, solo quelli di bower e vendor :

modulo npm come standard AMD Asset standard

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

AMD: definizione del modulo asincrono

Preferisco e uso in questo modo perché evita le variabili globali e segue la convenzione di import di Ember.js.

brace-CLI-build.js:

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

amd è il tipo di trasformazione applicato e ic-ajax è il nome del modulo da utilizzare quando viene importato su un file javascript.

sul file javascript di Ember.js (router, componente …):

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

raw è un modulo esportato da ic-ajax .

Questo è il modo in cui ha funzionato per me anche se la documentazione della CLI di Ember mostra l’ import altro modo che non ha funzionato per me , forse a causa del pacchetto specifico che stavo importando:

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

modulo npm come variabile globale

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

brace-CLI-build.js:

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

sul file javascript di Ember.js (router, componente …):

 /* global moment */ // No import for moment, it's a global called `moment` // ... var day = moment('Dec 25, 1995'); 

/* global moment */ è un’annotazione per ESLint che non mostra un errore durante la costruzione del progetto perché moment() non è definito nel file.

modulo npm come standard denominato AMD Asset

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

La CLI di Ember mostra anche una terza opzione che non ha funzionato per me , forse a causa del pacchetto specifico che stavo importando:

brace-CLI-build.js:

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

sul file javascript di Ember.js (router, componente …):

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

modulo npm come moduli JavaScript AMD

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

La modalità descritta nella documentazione di Ember.js su Gestione delle dipendenze non ha funzionato neanche per me , forse a causa del pacchetto specifico che stavo importando:

brace-CLI-build.js:

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

sul file javascript di Ember.js (router, componente …):

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

anche se questo è un vecchio thread, ho pensato di contribuire come ho passato un po ‘di tempo a fare questo. Il pacchetto specifico che stavo cercando di colbind a ember era “d3plus” e dovevo fare una serie di cose per farlo funzionare.

  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

quindi nel componente, import d3plus from 'npm:d3plus';

Per molto tempo stavo ottenendo errori di runtime mentre cercavo il coffescript e ho pensato che sarebbe stato utile per le persone che cercavano specificatamente d3plus.