auto-import
v0.1.4
Published
create index files that auto-import ES6 modules
Downloads
46
Readme
auto-import
[![Build Status][b-img]][b-url] [![Coverage Status][c-img]][c-url]
About | Why | Installation | Usage | Example | License
About
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:
source/
└── 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'
Why
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!
Installation
Install
$ npm install --save-dev auto-import
Require
var autoImport = require('auto-import')
Usage
autoImport(directory, ignore)
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
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
inmoduleA
, so you don't need to bundle it separately. You can ignorevendor
sovendor.js
isn't created.
Example
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.