Extensive configuration system for customizing auto-import behavior, webpack settings, and build optimization. Configuration is specified in ember-cli-build.js under the autoImport key.
Complete interface for all supported configuration options:
/**
* Complete configuration options for ember-auto-import
* Specified in ember-cli-build.js under autoImport key
*/
interface Options {
/** Packages to exclude from auto-import processing */
exclude?: string[];
/** Import path aliases for package name remapping */
alias?: { [fromName: string]: string };
/** Custom webpack configuration to merge */
webpack?: Configuration;
/** Public URL for assets (auto-detected if not specified) */
publicAssetURL?: string;
/** Style loader configuration options */
styleLoaderOptions?: Record<string, unknown>;
/** CSS loader configuration options */
cssLoaderOptions?: Record<string, unknown>;
/** Mini CSS extract plugin configuration options */
miniCssExtractPluginOptions?: Record<string, unknown>;
/** Disable eval for Content Security Policy compliance */
forbidEval?: boolean;
/** Packages to skip babel transformation */
skipBabel?: { package: string; semverRange?: string }[];
/** Dependencies to watch for changes during development */
watchDependencies?: (string | string[])[];
/** App file patterns to handle through webpack */
allowAppImports?: string[];
/** Custom script tag insertion location */
insertScriptsAt?: string;
/** Custom style tag insertion location */
insertStylesAt?: string;
}Usage Example:
let app = new EmberApp(defaults, {
autoImport: {
exclude: ['some-package'],
alias: {
'plotly.js': 'plotly.js-basic-dist',
'handlebars': 'handlebars/dist/handlebars'
},
forbidEval: true,
skipBabel: [
{
package: 'mapbox-gl',
semverRange: '*'
}
],
watchDependencies: [
'my-local-lib',
['some-lib', 'its-dependency']
],
allowAppImports: ['lib/*'],
webpack: {
resolve: {
fallback: {
crypto: false
}
}
}
}
});Exclude packages from auto-import processing when they're already included another way:
/**
* Packages to exclude from auto-import processing
* Useful when packages are included via other means
*/
exclude?: string[];Usage Examples:
// Exclude specific packages
autoImport: {
exclude: ['jquery', 'ember-data']
}
// Exclude packages handled by other addons
autoImport: {
exclude: ['chart.js'] // If included via ember-cli-chart
}Remap import paths to different packages or entry points:
/**
* Import path aliases for package name remapping
* Supports prefix matching by default, exact matching with $ suffix
*/
alias?: { [fromName: string]: string };Usage Examples:
autoImport: {
alias: {
// Remap package names
'plotly.js': 'plotly.js-basic-dist',
// Use different entry points
'handlebars': 'handlebars/dist/handlebars',
// Exact match only (with $ suffix)
'some-package/alpha$': 'customized',
// Prefix matching (default behavior)
'lodash': 'lodash-es' // Also maps 'lodash/get' to 'lodash-es/get'
}
}Merge custom webpack configuration for advanced build customization:
/**
* Custom webpack configuration to merge with auto-import's webpack config
* Supports all webpack configuration options
*/
webpack?: Configuration;Usage Examples:
autoImport: {
webpack: {
resolve: {
fallback: {
crypto: false,
stream: require.resolve('stream-browserify')
}
},
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
},
plugins: [
new DefinePlugin({
'process.env.API_URL': JSON.stringify(process.env.API_URL)
})
]
}
}Control babel transformation for specific packages:
/**
* Packages to skip babel transformation
* Useful for pre-transpiled packages that break with double transpilation
*/
skipBabel?: { package: string; semverRange?: string }[];Usage Examples:
autoImport: {
skipBabel: [
{
package: 'mapbox-gl',
semverRange: '*' // All versions
},
{
package: 'some-es5-lib',
semverRange: '^2.0.0' // Only version 2.x
}
]
}Watch dependencies for changes during development:
/**
* Dependencies to watch for changes during development
* Triggers rebuilds when watched packages change
*/
watchDependencies?: (string | string[])[];Usage Examples:
autoImport: {
watchDependencies: [
'my-local-lib', // Direct dependency
['some-lib', 'nested-dep'], // Nested dependency
'@my-org/shared-utils'
]
}Process app files through webpack instead of Ember's pipeline:
/**
* App file patterns to handle through webpack
* Uses minimatch patterns for file matching
*/
allowAppImports?: string[];Usage Examples:
autoImport: {
allowAppImports: [
'lib/*', // All files in lib directory
'utils/big-lib.js', // Specific file
'assets/*.worker.js' // Worker files
]
}
// Now you can dynamically import app files
import('my-app/lib/massive-utility').then(module => {
// This will be code-split thanks to allowAppImports
});Control asset URLs and HTML insertion points:
/**
* Public URL for assets, auto-detected if not specified
* Required for CDN deployments or custom asset paths
*/
publicAssetURL?: string;
/**
* Custom script tag insertion location in HTML
* Allows manual control over script placement and attributes
*/
insertScriptsAt?: string;
/**
* Custom style tag insertion location in HTML
* Allows manual control over stylesheet placement and attributes
*/
insertStylesAt?: string;Usage Examples:
autoImport: {
publicAssetURL: 'https://cdn.example.com/assets/',
insertScriptsAt: 'custom-scripts-go-here',
insertStylesAt: 'custom-styles-go-here'
}Then in your HTML template:
<head>
<custom-styles-go-here></custom-styles-go-here>
</head>
<body>
<custom-scripts-go-here></custom-scripts-go-here>
</body>Configure CSP-compliant builds:
/**
* Disable eval for Content Security Policy compliance
* Uses slower sourcemap implementation but CSP-safe
*/
forbidEval?: boolean;Usage Example:
autoImport: {
forbidEval: true // Required for strict CSP environments
}Customize webpack loaders for styles and CSS:
/**
* Style loader configuration options
* Controls how CSS is injected into the page
*/
styleLoaderOptions?: Record<string, unknown>;
/**
* CSS loader configuration options
* Controls CSS processing and module resolution
*/
cssLoaderOptions?: Record<string, unknown>;
/**
* Mini CSS extract plugin configuration options
* Controls CSS file extraction in production builds
*/
miniCssExtractPluginOptions?: Record<string, unknown>;Usage Examples:
autoImport: {
styleLoaderOptions: {
insert: 'head'
},
cssLoaderOptions: {
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
miniCssExtractPluginOptions: {
filename: 'assets/[name]-[contenthash].css'
}
}For addon authors, configuration should be specified in the addon's index.js file:
// In your addon's index.js file
module.exports = {
name: 'my-addon',
options: {
autoImport: {
exclude: ['some-package'],
skipBabel: [
{ package: 'pre-compiled-lib', semverRange: '*' }
]
}
}
};