inline-import

Inline Import

A tool that inlines custom file imports.

Use Case

Instead of loading external files during runtime, you may wish to integrate the raw file contents directly into your JavaScript files during build time. This can be achieved using the native import syntax:

import data from "./data.png";

The type of the external file is irrelevant. You only need to specify a preferred encoding for each file type.

Installation

npm install inline-import

Usage

The inlining process is destructive. Affected files will be changed permanently.
To inline your file imports, you need to specify the path to the JavaScript file that should be modified. Additionally, you need to define the extensions of the relevant import statements.

text.txt

hello world

index.js

import component from "module";
import text from "./text.txt";

inline.js

import InlineImport from "inline-import";

InlineImport.transform("index.js", {

	extensions: {
		".txt": "utf8"
	}

}).then(successMessage => {

	console.log(successMessage);

}).catch(e => {

	console.error(e);

});

index.js (inlined)

import component from "module";
const text = "hello world";

Options

• You may define a specific encoding for the JavaScript files that should be processed. Use one of the possible encoding values specified in node's Buffer class. The default encoding is utf8.
• Only imports with matching file extensions will be considered. Each extension must define its own encoding.
• If, for some reason, you don't want to use the const statement, set useVar to true.

InlineImport.transform(filePath, {
	encoding: "utf8",
	useVar: true,
	extensions: {
		".html": "utf8",
		".png": "base64"
	}
}).catch(e => console.error(e));

Build Tool Integration

• Inline Import Grunt plugin

Contributing

Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.