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

Command Line Interface (CLI)

The command line tool can be invoked using the inline-import command. It requires a configuration in which the source paths and the options are specified. You can decide whether you want to provide the configuration via package.json or as a standalone file.

If there is no configuration in package.json, the tool will look for a configuration file with the default name .inline-import.json in the current working directory.

Affected files will automatically be copied into a backup directory before they are modified. You can restore the original files by using the --restore option.

Option	Shorthand	Description
--config	-c	Specifies an alternative config path
--backup	-b	Only copies files into a backup directory
--restore	-r	Restores files from the backup directory

Example

inline-import -c config/inline-import.json

JavaScript API

The immediate 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(modified => {

	console.log(modified ? "Success!" : "Nothing changed");

}).catch(console.error);

index.js (inlined)

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

Options

• Command line exclusive:
  • You must specify a list of target source paths under src.
  • An alternative backup path may be specified. The default path is .backup.
• You may define a specific encoding for the JavaScript files that will 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.

.inline-import.json

{
	"src": ["src/**/*.js"],
	"backup": "path/to/backup",
	"encoding": "utf8",
	"useVar": true,
	"extensions": {
		".html": "utf8",
		".png": "base64"
	}
}

package.json

{
	"inlineImport": {
		"src": ["src/**/*.js"],
		"extensions": {}
	}
}

inline.js

InlineImport.transform(filePath, {
	encoding: "utf8",
	useVar: true,
	extensions: {}
}).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.