1. 技术文章
  2. How to use third party npm packages with ember cli app

How to use third party npm packages with ember cli app

由 偶尔善良 提交于 2019-11-27 07:16:22

The easiest and recommended answer is to use ember-browserify. (as support for bower packages will be removed in the future.)

This is an example for using the npm package dexie within an Ember CLI app.

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

Install dexie (or whatever module you need): npm install dexie --save-dev

Import the module like this: import Dexie from 'npm:dexie';

Preexo

UPDATE: I got this to work much better and straight forward! Thanks to the comment of @j_mcnally!

Will leave the first answer down there so everyone can see what trouble I was coming from :)

What I did:

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

In my file Brocfile.js I could just do app.import('bower_components/crypto-js/build/rollups/hmac-md5.js');

No manual downloading or moving files, just managing a dependency, much better solution!

But honestly, it was still a lot of vodoo! Until I found the documentation... sweet: http://bower.io/docs/api/#install

OLD approach

I got this to work, but I can not tell how pretty or correct that approach is. Including third party packages or libraries with ember cli is pretty far away from straight forward or self explaining.

The ressources which led me to my working solution were:

The following steps I took to get it working:

Then the build worked and I could eventually use the library.

Sadly I didn't get the npm package to work! I had to manually download the zip file, unzip it and move it to the correct location and if the version changes, it's not under any version/dependency control... I will not mark this as an answer, since it does not satisfy me at all, but at least I wanted to share what I did to make it work for me.

As Timm describes, using browserify gets the code injected into your ember app. However, I was having trouble actually using the injected module. In order to do that I had to actually create the module with New before I could use it:

In order to import an NPM module.

1) install browserify:

npm install ember-browserify --save-dev

2) install your modele:

npm install my-module --save-dev

3) Import your module into your ember file of interest (app/controller/post.js):

import Module from 'npm:my-module';

4) use the module from within your code by creating the module with New:

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

As stated by Pablo Morra on a comment of the simplabs' post "Using npm libraries in Ember CLI", third party npm modules can be imported on Ember.js from version 2.15 directly without the need of addons or wrappers:

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

Unfortunately documentation is still on work and it doesn't say that npm modules can be imported, only bower and vendor ones:

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

I've gotten 2 solutions to import third party npm modules directly on Ember.js from the Ember CLI documentation about managing dependencies, although it's also out-of-date and says that npm modules can't be imported, only bower and vendor ones:

npm module as Standard Anonymous AMD Asset

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

AMD: Asynchronous Module Definition

I prefer and use this way because it avoids global variables and follows the import convention of Ember.js.

ember-cli-build.js:

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

amd is the type of transformation applied, and ic-ajax is the module name to be used when it's imported on a javascript file.

on Ember.js javascript file (router, component...):

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

raw is a module exported by ic-ajax.

That's the way it worked for me although the Ember CLI documentation shows the import other way that didn't work for me, maybe because of the specific package I was importing:

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

npm module as global variable

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

ember-cli-build.js:

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

on Ember.js javascript file (router, component...):

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

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

/* global moment */ is an annotation for ESLint not to show an error when building the project because moment() is not defined in the file.

npm module as Standard Named AMD Asset

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

Ember CLI also shows a third option that didn't work for me, maybe because of the specific package I was importing:

ember-cli-build.js:

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

on Ember.js javascript file (router, component...):

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

npm module as AMD JavaScript modules

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

The way described on Ember.js documentation about Managing Dependencies didn't work for me either, maybe because of the specific package I was importing:

ember-cli-build.js:

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

on Ember.js javascript file (router, component...):

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

even though this is an old thread thought I would contribute as I spent a while doing this. The specific package I was trying to link to ember was 'd3plus' and had to do a variety of things to get it to work.

  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

then in your component do import d3plus from 'npm:d3plus';

For a long time I was getting runtime errors when it was searching for the coffescript and figured this would be helpful for people specifically looking for d3plus.

标签
ember.js
npm
ember-cli
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!