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-eslint
In your
.eslintrc.js
file, addparser: 'babel-eslint'
In your
ember-cli-build.js
file, 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 "