ember-cli / ember-cli.github.io

Our documentation site
13 stars 99 forks source link

Importing from node_modules is possible now. #175

Closed mrukas closed 6 years ago

mrukas commented 7 years ago

It should be written in the documentation that assets can now also be imported from node_modules instead of just bower_components and vendor.

From the ember-cli documentation:

You can only import assets that are within the bower_components or vendor directories. The following example scenarios illustrate how this works

From the ember 2.15 release blog entry:

Ember CLI has an API for importing individual files into the built assets, by calling app.import within ember-cli-build.js. This API now supports importing files from within node_modules, making it easier to consume dependencies using only npm, rather than a more complicated mix of npm and bower.

vlascik commented 7 years ago

Docs could also use a better write-up on how to import UMD/CJS/ES6 modules and a link to some article about how to distinguish between the formats. There are questions about imports popping up on slack all the time, the current state is pretty confusing, even for developers with some ember experience.

rdhelms commented 6 years ago

Did this ever get addressed? I'm trying to find in the docs precisely how to do this, and not having any luck

rdhelms commented 6 years ago

To clarify, in trying to import a file from node_modules into my addon, this is what I ended up with:

var Funnel = require('broccoli-funnel');

module.exports = {
    name: 'ember-example',

    included(app) {
        this._super.included.apply(this, arguments);
        app.import('vendor/bootstrap.min.css');
    },

    treeForVendor(vendorTree) {
        return new Funnel(`${this.project.root}/node_modules/bootstrap/dist/css`, {
            files: ['bootstrap.min.css']
        });
    }
};

I would like to know though if this is the recommended way, or if there is an easier way. app.import(`${this.project.root}/node_modules/bootstrap/dist/css/bootstrap.min.css`); (along with other variations like vendor/bootstrap/dist/css/bootstrap.min.css etc) did not work for me although that was more what I was hoping for.

sivakumar-kailasam commented 6 years ago

https://github.com/emberjs/guides/pull/2296 will resolve this.