Add node module to ember CLI app

Question

I would like to use this Node.js module https://www.npmjs.com/package/remarkable-regexp in my Ember-CLI application.

How do I make it available to the Ember applicat

Answer 1

ember-browserify is a great choice for use in apps, and there is work being done to try to allow Ember CLI to import NPM packages without any extra help at all.

However, if you're trying to make this work in both addons and apps you can take a slightly different approach, which is to manually modify the broccoli build chain to include your Node package.

This is a quick example of how this can be done in an addon's index.js file:

var path = require('path');
var mergeTrees = require('broccoli-merge-trees');
var Funnel = require('broccoli-funnel');

module.exports = {
  name: 'my-addon',

  treeForVendor: function(tree) {
    var packagePath = path.dirname(require.resolve('node-package'));
    var packageTree = new Funnel(this.treeGenerator(packagePath), {
      srcDir: '/',
      destDir: 'node-package'
    });
    return mergeTrees([tree, packageTree]);
  },

  included: function(app) {
    this._super.included(app);

    if (app.import) {
      this.importDependencies(app);
    }
  },

  importDependencies: function(app) {
    app.import('vendor/node-package/index.js');
  }
};

A similar technique can be used for standard apps. Again, this method will be replaced soon as the Ember CLI team adds support for Node modules, so try to use it sparingly and keep up to date with Ember CLI!

Answer 2

The browserify noise is probably the preferred method, but I hacked around it by creating a symlink in the vendor folder like so:

$ npm install --save-dev css.escape
$ cd vendor
$ ln -s ../node_modules/css.escape/css.escape.js css.escape.js

then

// ember-cli-build.js
app.import('vendor/css.escape.js');

Answer 3

As of Ember-CLI 2.15.0, you can now import node modules directly. To demonstrate, ensure your app is on Ember-CLI 2.15.0, then try installing Moment.js:

1. yarn add moment
2. Add app.import('node_modules/moment/moment.js') to your ember-cli-build.js file.
3. You can now access moment via the window object: window.moment.
4. (optional) If you want to be able to import moment from 'moment', you can generate a vendor shim. See this link for details.

This won't work for node modules that don't provide a single JavaScript bundle (you will need to bundle using the methods described in other comments), but it's already a huge improvement.

Answer 4

Update you ember-cli to v2.15.0-beta.1. The new version allows you to use app.import with node_modules

For more information check https://github.com/ember-cli/ember-cli/pull/7045

Answer 5

Since remarkable-regexp is a npm module, I believe the best way to integrate it with ember-cli is by using ember-browserify.

Within your ember-cli app you can install the addon by running npm install --save-dev ember-browserify

So, you can import the modules using ES6 import by prefixing it with npm:

import Remarkable from 'npm:remarkable';
import Plugin from 'npm:remarkable-regexp';

var plugin = Plugin(
  // regexp to match
  /@(\w+)/,

  // this function will be called when something matches
  function(match, utils) {
    var url = 'http://example.org/u/' + match[1]

    return '<a href="' + utils.escape(url) + '">'
      + utils.escape(match[1])
      + '</a>'
  }
)

new Remarkable()
  .use(plugin)
  .render("hello @user")

// prints out:
// <p>hello <a href="http://example.org/u/user">user</a></p>