[![Build Status][b-img]][b-url] [![Coverage Status][c-img]][c-url]
auto-import is a small Node.js module for automatically building an index file with
import statements to every module (file) in a directory.
This is useful for specific ES6 workflows with
webpack, especially when combined with a task-runner with file watching capabilities (e.g.
source/ └── scripts/ └── main ├── moduleA.js ├── moduleB.js └── moduleC.js
// source/scripts/main.js import './main/moduleA.js' import './main/moduleB.js' import './main/moduleC.js'
I like using
webpack in my build pipeline for front-end dev.
I have a
gulp watch task that watches my source code and automatically rebuilds.
In my experience, webpack doesn't like it when you add or remove entries to the bundle during
To get around this, I began creating index files filled with
import statements for my JS bundles.
For example, say I want webpack to bundle up all my scripts in
So, I create a file
source/scripts/main.js filled with
import statements to the scripts in
./main.js as the sole entry point for webpack, and watch
source/scripts/**/*.js to trigger rebuilds.
With this workflow, I can add or remove modules inside
source/scripts/main/ without webpack barfing because webpack still has
source/scripts/main.js as its sole entry point.
To actually add or remove a module from the bundle, though, I have to add or remove the
import statment from
auto-import automatically creates
source/scripts/main.js so I don't have to.
auto-import in my workflow, I only have to add or remove a file in
source/scripts/main for it to be added or removed from the bundle.
$ npm install --save-dev auto-import
var autoImport = require('auto-import')
Example source tree:
source/ └── scripts/ ├── main │ ├── moduleA.js │ ├── moduleB.js │ └── moduleC.js └── vendor └── someFramework.js
- directory (string) -- The top level directory containing directories of source scripts.
Given the example tree, this would be
- ignore (string or array of strings) -- Subdirectories inside directory that you do not want to create an index file for.
For example, say you are importing
moduleA, so you don't need to bundle it separately. You can ignore
Check out the example with
To test it out,
example and install the additional dependencies with
Start up the build process with
gulp watch, then try adding, removing, and editing scripts in
The respective bundles in
example/dist will update accordingly.