README
ember-auto-import
Just import from NPM, with zero configuration.
Installation
npm install --save-dev ember-auto-import webpack
If you're upgrading from 1.x to 2.x see the upgrade guide.
Usage
Add whatever dependency you want to your project using NPM or yarn like:
npm install --save-dev lodash-es
or
yarn add --dev lodash-es
Then just import it from your Ember app code:
import { capitalize } from 'lodash-es';
There is no step two. Works from both app code and test code.
Dynamic Import
In addition to static top-level import statements, you can use dynamic import() to lazily load your dependencies. This can be great for reducing your initial bundle size.
Dynamic import is currently a Stage 3 ECMA feature, so to use it there are a few extra setup steps:
npm install --save-dev babel-eslintIn your
.eslintrc.jsfile, addparser: 'babel-eslint'In your
ember-cli-build.jsfile, enable the babel plugin provided by ember-auto-import:
let app = new EmberApp(defaults, {
babel: {
plugins: [require.resolve('ember-auto-import/babel-plugin')],
},
});
Once you're setup, you can use dynamic import() and it will result in loading that particular dependency (and all its recursive dependencies) via a separate Javascript file at runtime. Here's an example of using dynamic import from within a Route, so that the extra library needed for the route is loaded at the same time the data is loaded:
export default Route.extend({
model({ id }) {
return Promise.all([
fetch(`/data-for-chart/${id}`).then(response => response.json()),
import('highcharts').then(module => module.default),
]).then(([dataPoints, highcharts]) => {
return { dataPoints, highcharts };
});
},
});
If you're using custom deployment code, make sure it will include all the Javascript files in dist/assets, not just the default app.js and vendor.js.
Customizing Build Behavior
While most NPM packages authored in CommonJS or ES Modules will Just Work, for others you may need some give ember-auto-import a hint about what to do.
You can set options like this in your ember-cli-build.js:
// In your ember-cli-build.js file
let app = new EmberApp(defaults, {
autoImport: {
alias: {
// when the app tries to import from "plotly.js", use
// the real package "plotly.js-basic-dist" instead.
'plotly.js': 'plotly.js-basic-dist',
// you can also use aliases to pick a different entrypoint
// within the same package. This can come up when the default
// entrypoint only works in Node, but there is also a browser
// build available (and the author didn't provide a "browser"
// field in package.json that would let us detect it
// automatically).
handlebars: 'handlebars/dist/handlebars',
// We do a prefix match by default, so the above would also
// convert "handlebars/foo" to "handlebars/dist/handlesbars/foo".
// If instad you want an exact match only, you can use a trailing "