This package has been deprecated

Author message:

this package has been deprecated

gulp-module-import-async

A plugin for gulp meant for webpack development that will parse Javascript files for import statements with a custom 'async' property and instead move them to the bottom of the files as non-blocking require statements.

Installation

$ npm install gulp-module-import-async --save-dev

Use case

This plugin is meant for this kind of scenario:

import "./awesome-stuff" async;

The async property is NOT part of the official ES2015 module spec. Be aware that the semantics this plugin expects isn't and probably never will be officially supported.

The gulp plugin will then remove the import and instead append a require() statement to the end of the file wrapped within a setTimeout to make it a non-blocking deferred microtask. Note that this plugin WON't do any loading. It is meant for being used along with webpack where the file path is statically evaluated and added to the bundle already. This will just defer the evaluation of the code.

/* Other static sync imports */
 
/* Code stuff */
setTimeout(function() {
    require("./awesome-stuff");
}, 0);

The plugin will evaluate all imports with an async property and inject them into the same timeout. For instance:

import "./foo" async;
import "./bar" async;
import "./static-stuff";

becomes:

import "./static-stuff";
 
...
 
setTimeout(function() {
require("./foo");
require("./bar");
}, 0);

The plugin also supports default modules. For instance:

import AwesomeButton from "../components/AwesomeButton" async;

Will be transformed to:

/* random static imports */
import RedCar from "../car-classes/RedCar";
import BlueCar from "../car-classes/BlueCar";
import SomethingElseThanACar from "../whatever/foo";
 
//The module name will be assigned to a variable declared below the last import:
let AwesomeButton;
 
/* Code goes here */
 
/* Bottom of the file: */
setTimeout(function(){
    AwesomeButton = require("../components/AwesomeButton");
}, 0);

Usage

Simply add it to your gulpfile.js:

const MODULE_IMPORT_ASYNC = require('gulp-module-import-async');
 
    gulp.src("./assets/**/*.*")
        .pipe(asyncStaticImport())
        .pipe(gulp.dest(COMPILED_DIRECTORY + "/assets"));

License

Copyright (c) 2016 Dlmma IVS. Released under the MIT license.