ember.js - Cómo utilizar paquetes de npm de terceros con la aplicación ember cli

ember-cli (5)

Como afirma Pablo Morra en un comment de la publicación de simplabs "Uso de bibliotecas npm en Ember CLI" , los módulos npm de terceros se pueden importar en Ember.js desde la versión 2.15 directamente sin la necesidad de complementos o envoltorios :

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

Lamentablemente, la documentación todavía está en funcionamiento y no dice que los módulos npm puedan importarse, solo los de bower y de proveedor:

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

Obtuve 2 soluciones para importar módulos npm de terceros directamente en Ember.js de la documentación de CLI de Ember sobre la administración de dependencias , aunque también está desactualizado y dice que los módulos npm no se pueden importar, solo los de nómina y proveedores. :

Módulo npm como Activo estándar AMD anónimo

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

AMD: definición de módulo asíncrono

Prefiero y uso de esta manera porque evita las variables globales y sigue la convención de 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 es el tipo de transformación aplicada, y ic-ajax es el nombre del módulo que se utilizará cuando se importe en un archivo javascript.

en el archivo JavaScript de Ember.js (enrutador, componente ...):

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

raw es un módulo exportado por ic-ajax .

Esa es la forma en que funcionó para mí, aunque la documentación de Ember CLI muestra la import otra manera que no funcionó para mí , tal vez debido al paquete específico que estaba importando:

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

módulo npm como variable global

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

ember-cli-build.js:

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

en el archivo JavaScript de Ember.js (enrutador, componente ...):

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

/* global moment */ es una anotación para que ESLint no muestre un error al generar el proyecto porque moment() no está definido en el archivo.

Módulo npm como Activo AMD con nombre estándar

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

Ember CLI también muestra una tercera opción que no funcionó para mí , tal vez debido al paquete específico que estaba importando:

ember-cli-build.js:

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

en el archivo JavaScript de Ember.js (enrutador, componente ...):

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

Módulo npm como módulos AMD JavaScript

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

La forma descrita en la documentación de Ember.js sobre la administración de dependencias tampoco me funcionó , tal vez debido al paquete específico que estaba importando:

ember-cli-build.js:

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

en el archivo JavaScript de Ember.js (enrutador, componente ...):

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

EDITAR: esto es realmente sobre cualquier paquete npm que no está diseñado para jugar junto con la brasa. En mi caso, traté de hacer que crypto-js funcione, pero parece ser siempre el mismo problema con cualquier paquete npm no especialmente diseñado para ember cli.

Quiero usar cryptoJS en mi aplicación Ember, que actualmente estoy refactorizando con ember cli, pero estoy teniendo muchos problemas importando todos los paquetes de terceros y las bibliotecas que ya estoy usando, como por ejemplo cryptoJS.

CryptoJS al menos tiene un paquete para npm, ni siquiera quiero pensar en lo que sucederá si algunas de las bibliotecas incluidas no tienen un paquete ...

¿Me estoy perdiendo el punto en la documentación de ember-cli o realmente no se describe cómo importar otros paquetes de npm y también cómo incluir correctamente las bibliotecas que no son de paquete para mantenerlos bajo control de versiones y control de dependencia?

Si sigo la descripción del manual del paquete crypto-js:

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

Obtengo un error en mi ember build

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

Gracias por ayudarme con esto, estoy muy entusiasmado con el proyecto cli de la brasa, pero la importación de mi aplicación actual de brasas ha sido muy dolorosa hasta ahora ...

EDITAR:

Solo la importación desafortunadamente no funciona.

import CryptoJS from ''crypto-js'';

lanza durante la construcción

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)

La respuesta más fácil y recomendada es usar ember-browserify . (ya que el soporte para paquetes de bower se eliminará en el futuro ) .

Este es un ejemplo para usar el paquete dexie dentro de una aplicación Ember CLI.

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

Instale dexie (o cualquier módulo que necesite): npm install dexie --save-dev

Importe el módulo de esta manera: import Dexie from ''npm:dexie'';

Tal como lo describe Timm, al utilizar browserify, el código se inyecta en la aplicación de la brasa. Sin embargo, estaba teniendo problemas para usar el módulo inyectado. Para hacer eso tuve que crear realmente el módulo con New antes de poder usarlo:

Para importar un módulo de NPM.

1) instalar browserify:

npm install ember-browserify --save-dev

2) instala tu modele:

npm install my-module --save-dev

3) Importe su módulo a su archivo de interés (app / controller / post.js):

import Module from ''npm:my-module'';

4) use el módulo desde dentro de su código creando el módulo con New :

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

a pesar de que este es un hilo viejo pensé que contribuiría ya que pasé un tiempo haciendo esto. El paquete específico que estaba intentando vincular con Ember era ''d3plus'' y tenía que hacer varias cosas para que funcionara.

npm install ember-browserify --save-dev
npm install d3plus --save-dev
ember install ember-cli-coffeescript
npm install --save-dev coffeeify coffeescript

luego, en su componente, import d3plus from ''npm:d3plus'';

Durante mucho tiempo recibí errores de tiempo de ejecución cuando estaba buscando el guión y pensé que sería útil para las personas que buscan específicamente d3plus.

ACTUALIZACIÓN: ¡Conseguí que esto funcione mucho mejor y más directo! Gracias al comentario de @j_mcnally!

Dejaremos la primera respuesta para que todos puedan ver de qué problema vengo :)

Lo que hice:

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

En mi archivo Brocfile.js podría hacer app.import(''bower_components/crypto-js/build/rollups/hmac-md5.js'');

Sin descarga manual ni archivos en movimiento, solo gestión de una dependencia, ¡solución mucho mejor!

Pero, sinceramente, ¡todavía era mucho vodoo! Hasta que encontré la documentación ... dulce: http://bower.io/docs/api/#install

VIEJO enfoque

Lo hice funcionar, pero no puedo decir qué tan bonito o correcto es ese enfoque. Incluir paquetes de terceros o bibliotecas con ember cli está bastante lejos de ser simple o autoexplicativo.

Los recursos que me llevaron a mi solución de trabajo fueron:

Los siguientes pasos que tomé para que funcione:

Descargué manualmente la biblioteca https://code.google.com/p/crypto-js/downloads/detail?name=CryptoJS%20v3.1.2.zip y la desliqué
Creé manualmente un directorio en mi directorio de proveedores: mkdir vendor/crypto-js
app.import(''vendor/crypto-js/hmac-md5.js''); al archivo Brocfile.js
"CryptoJS" a la clave "predef" en el archivo .jshintrc

Luego la compilación funcionó y eventualmente pude usar la biblioteca.

¡Lamentablemente no conseguí que el paquete npm funcionara! Tuve que descargar manualmente el archivo zip, descomprimirlo y moverlo a la ubicación correcta, y si la versión cambia, no está bajo ninguna versión / control de dependencia ... No marcaré esto como una respuesta, ya que no me satisface en absoluto, pero al menos quería compartir lo que hice para que funcione para mí.