create index files that auto-import ES6 modules
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


[![Build Status][b-img]][b-url] [![Coverage Status][c-img]][c-url]

About | Why | Installation | Usage | Example | License


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. gulp).

From this:

└── scripts/
    └── main
        ├── moduleA.js
        ├── moduleB.js
        └── moduleC.js

Create this:

// source/scripts/main.js
import './main/moduleA.js'
import './main/moduleB.js'
import './main/moduleC.js'


I like using gulp and 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 gulp watch.

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 source/scripts/main/. So, I create a file source/scripts/main.js filled with import statements to the scripts in source/scripts/main/, use ./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 source/scripts/main.js.

auto-import automatically creates source/scripts/main.js so I don't have to. With 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. Very nice!



$ npm install --save-dev auto-import


var autoImport = require('auto-import')


autoImport(directory, ignore)

Example source tree:

└── 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 source/scripts.
  • 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 someFramework in moduleA, so you don't need to bundle it separately. You can ignore vendor so vendor.js isn't created.


Check out the example with gulp and webpack here.

To test it out, cd into example and install the additional dependencies with npm install. Start up the build process with gulp watch, then try adding, removing, and editing scripts in example/scripts/main and example/scripts/contact-page. The respective bundles in example/dist will update accordingly.