webentwicklung-frage-antwort-db.com.de

Verwendung von npm-Paketen von Drittanbietern mit der App ember cli

EDIT: Hierbei handelt es sich eigentlich um ein beliebiges npm-Paket, das nicht zum Spielen mit ember entwickelt wurde. In meinem Fall habe ich versucht, Crypto-Js zum Laufen zu bringen, aber es scheint immer das gleiche Problem zu sein, mit einem beliebigen npm-Paket, das nicht speziell für Ember CLI entwickelt wurde.

Ich möchte cryptoJS in meiner Ember-App verwenden, die ich derzeit mit Ember cli umwandle, aber ich habe Probleme beim Importieren aller Pakete und Bibliotheken von Drittanbietern, die ich bereits verwende, wie zum Beispiel cryptoJS.

CryptoJS hat zumindest ein Paket für npm. Ich möchte nicht einmal darüber nachdenken, was passiert, wenn einige meiner enthaltenen Bibliotheken kein Paket haben ...

Fehle ich nur den Punkt in der Dokumentation von ember-cli oder ist es wirklich nicht beschrieben, wie andere npm-Pakete importiert werden, und auch, wie Nicht-Paket-Bibliotheken ordnungsgemäß eingefügt werden, um sie unter Versionskontrolle und Abhängigkeitskontrolle zu halten?

Wenn ich der Beschreibung des Handbuchs für das Crypto-js-Paket folge:

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

Ich bekomme eine Fehlermeldung in meinem ember build

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

Vielen Dank für jede Hilfe, ich bin sehr aufgeregt über das Ember-Cli-Projekt, aber der Import meiner vorhandenen Ember-App war bisher ziemlich schmerzhaft ... 

BEARBEITEN:

Nur das Importieren funktioniert leider nicht. 

import CryptoJS from 'crypto-js';

wirft während des Builds

[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)
26
Preexo

Die einfachste und empfohlene Antwort ist die Verwendung von ember-browserify . (als Unterstützung für Bower-Pakete wird zukünftig entfernt. )

Dies ist ein Beispiel für die Verwendung des npm-Pakets dexie in einer Ember-CLI-App.

Installieren Sie browserify: npm install ember-browserify --save-dev

Installieren Sie dexie (oder was auch immer Sie benötigen): npm install dexie --save-dev

Importieren Sie das Modul folgendermaßen: import Dexie from 'npm:dexie';

50
Timm

UPDATE: Ich habe dafür gesorgt, dass es viel besser und direkter funktioniert! Danke an den Kommentar von @j_mcnally!

Lass die erste Antwort dort, damit jeder sehen kann, aus welchem ​​Ärger ich komme :)

Was ich getan habe: 

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

In meiner Datei Brocfile.js könnte ich einfach app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');

Kein manuelles Herunterladen oder Verschieben von Dateien, nur Verwaltung einer Abhängigkeit, viel bessere Lösung!

Aber ehrlich gesagt, es war immer noch viel Vodoo! Bis ich die Dokumentation gefunden habe ... süß: http://bower.io/docs/api/#install


ALTER Ansatz

Ich habe das zum Laufen gebracht, aber ich kann nicht sagen, wie hübsch oder korrigiert dieser Ansatz ist. Das Einbinden von Drittanbieterpaketen oder -bibliotheken mit Glutcli ist ziemlich weit entfernt von einer einfachen oder selbsterklärenden Funktion.

Die Ressourcen, die mich zu meiner Arbeitslösung führten, waren:

Die folgenden Schritte habe ich gemacht, damit es funktioniert:

  • Ich habe die Bibliothek https://code.google.com/p/crypto-js/downloads/detail?name=CryptoJS%20v3.1.2.Zip manuell heruntergeladen und entpackt
  • Ich habe manuell ein Verzeichnis in meinem Herstellerverzeichnis erstellt: mkdir vendor/crypto-js
  • Ich habe app.import('vendor/crypto-js/hmac-md5.js'); an die Brocfile.js-Datei angehängt
  • Ich habe "CryptoJS" zum "predef"-Schlüssel in der .jshintrc-Datei hinzugefügt

Dann funktionierte der Build und ich konnte die Bibliothek irgendwann benutzen.

Leider habe ich das npm-Paket nicht zum Laufen gebracht! Ich musste die ZIP-Datei manuell herunterladen, entpacken und an den richtigen Speicherort verschieben. Wenn sich die Version ändert, wird sie nicht von einer Versions-/Abhängigkeitskontrolle gesteuert ... Ich werde dies nicht als Antwort markieren, da sie mich nicht zufriedenstellt Überhaupt, aber zumindest wollte ich mitteilen, was ich getan habe, damit es für mich funktioniert.

6
Preexo

Wie Timm beschreibt, wird mit browserify der Code in Ihre ember app eingefügt. Allerdings hatte ich Probleme, das eingeblendete Modul tatsächlich zu verwenden. Dazu musste ich das Modul tatsächlich mit New erstellen. bevor ich es benutzen konnte:

Um ein NPM-Modul zu importieren.

1) installiere browserify:

npm install ember-browserify --save-dev

2) installiere dein modele:

npm install my-module --save-dev

3) Importiere dein Modul in deine ember file of interest (app/controller/post.js):

import Module from 'npm:my-module';

4) Verwenden Sie das Modul aus Ihrem Code heraus, indem Sie das Modul mit New erstellen:

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

2
jtf

Wie in Pablo Morra zu einem Kommentar des Posts der simplabs "Using npm Libraries in Ember CLI" angegeben, können npm-Module von Drittanbietern ab Version 2.15 auf Ember.js importiert werden direkt ohne Addons oder Wrapper:

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

Leider ist die Dokumentation noch in Arbeit und es heißt nicht, dass npm-Module nur Bower- und Vendor-Module importiert werden können:

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

Ich habe 2 Lösungen zum Importieren von npm-Modulen von Drittanbietern direkt in Ember.js aus der Ember CLI-Dokumentation zum Verwalten von Abhängigkeiten erhalten Laube und Verkäufer:

npm-Modul als Standard Anonymous AMD Asset

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

AMD: Asynchrone Moduldefinition

Ich bevorzuge und verwende diesen Weg, da er globale Variablen vermeidet und der import-Konvention von Ember.js folgt.

ember-cli-build.js:

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

AMD ist der Typ der angewendeten Transformation, und ic-ajax ist der Modulname, der verwendet wird, wenn er in eine Javascript-Datei importiert wird.

in der Javascript-Datei von Ember.js (Router, Komponente ...):

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

raw ist ein von ic-ajax exportiertes Modul.

So funktionierte es für mich, obwohl die Ember CLI-Dokumentation die import-Methode zeigt, die für mich nicht funktionierte, vielleicht aufgrund des spezifischen Pakets, das ich importierte:

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

npm-Modul als globale Variable

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

ember-cli-build.js:

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

in der Javascript-Datei von Ember.js (Router, Komponente ...):

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

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

/* global moment */ ist eine Anmerkung für ESLint, um beim Erstellen des Projekts keinen Fehler anzuzeigen, da moment() nicht in der Datei definiert ist.

npm-Modul als Standard AMD Asset

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

Ember CLI zeigt auch eine dritte Option, die für mich nicht funktionierte, möglicherweise aufgrund des spezifischen Pakets, das ich importierte:

ember-cli-build.js:

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

in der Javascript-Datei von Ember.js (Router, Komponente ...):

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

npm-Modul als AMD-JavaScript-Modul

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

Die in der Dokumentation zu Ember.js beschriebene Vorgehensweise zum Verwalten von Abhängigkeiten funktionierte für mich nicht, möglicherweise aufgrund des spezifischen Pakets, das ich importierte:

ember-cli-build.js:

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

in der Javascript-Datei von Ember.js (Router, Komponente ...):

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

obwohl dies ein alter Faden ist, dachte ich, würde ich beitragen, da ich eine Weile damit verbracht habe. Das spezifische Paket, das ich mit Ember zu verknüpfen versuchte, war 'd3plus' und musste verschiedene Maßnahmen ergreifen, damit es funktioniert.

  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

dann in Ihrer Komponente import d3plus from 'npm:d3plus';

Ich habe lange Zeit Laufzeitfehler bekommen, als es nach dem Coffescript suchte. Ich dachte, das wäre hilfreich für Leute, die speziell nach d3plus suchen.

0
algreen11