Readers’ Questions - “How far are we from being able to just use any npm package via the import statement?”

Hello once again to Readers’ Questions, presented by the Ember.js Times folks with a little help from the Ember team :slight_smile:

Today we have a question by miguelcobain regarding modules and how to use them in Ember apps:

How far are we from being able to “just” write import statements from any npm package (commonJS and es6 modules)?

miguelcobain

This week @kellyselden will answer this question. Make sure to read and comment :slight_smile:

I am actively working on that feature. First we need a technology that scans all your JavaScript files for the import statements. I am working on Rollup as the first test of this, which will probably end up being the future default. It will not be mandatory though. The current system of concatenating all your files will still be allowed, and there could be alternate strategies, whether it be another bundler, or a custom one built just for Ember.

One thing that needs to happen first, is the in-progress packager RFC (https://github.com/Ember-CLI/rfcs/pull/110) implementation to be finished. This means Ember CLI itself will not depend on a specific bundler (i.e. Rollup). Instead, it will come in as a separate npm package that you can swap out if you wish. As far as Rollup specifically, more changes are needed to that project to support how Ember projects work. Currently there is handle missing exports in chunked mode by kellyselden · Pull Request #1986 · rollup/rollup · GitHub and Allow customizing the folder/file layout of experimentalPreserveModules by kellyselden · Pull Request #2089 · rollup/rollup · GitHub if you want to follow along at home.

Once these things are finished, we will have a “beta” version of the Rollup packager for Ember CLI. It will tree-shake your code and dependencies and allow imports of ES6 modules to “just work”. CommonJS imports will be a little more tricky. Although I also have that working, it’s not as straightforward to implement and probably is error prone. Because of this, we will probably offer automatic CommonJS imports as “experimental”.

A timeline is difficult to estimate because it all depends on how fast changes to Rollup can be made. It is possible that we will switch gears and go with a different strategy, but we are so close now that I hope that’s not the case. I would say we are still a few months out before landing all of this. In the meantime, there has been work to bridge this gap in functionality. GitHub - rwjblue/ember-cli-cjs-transform has been updated to use Rollup itself, meaning it will take in all the files it needs with one app.import. It also incidentally works with ES6 module projects as well.

@kellyselden

This answer was published in Issue #40. Don’t forget to subscribe to the newsletter to get new Readers’ Questions and other development news right in your inbox. You can also submit your own questions! You will find a link at the bottom of the newsletter.

See you in the next issue!

15 Likes

Thanks for putting that together @kellyselden!

1 Like

Thanks to @ef4 , this is now possible via the ember-auto-import addon.

1 Like