@aternus/babel-plugin-include NPM

@aternus/babel-plugin-include

Adds support for the include() function to the Babel compiler.

Why use this plugin?

A simple way to organize and reuse code.

The goal of this plugin is to allow a "native" way of including JavaScript code inline - at compilation time.

Installation

npm install -D @aternus/babel-plugin-include @babel/core @babel/cli

`.babelrc.json` / `babel.config.json` (Recommended)

{
  "plugins": ["@aternus/babel-plugin-include"]
}

Usage

The include() function takes an argument, a file path, e.g. file.js.

Code

`main.js`

include('welcome.js');
include('stateManager.js');

`welcome.js`

console.log('Welcome code');

`stateManager.js`

console.log('State manager code');

Result after compilation with Babel

console.log('Welcome code');
console.log('State manager code');

FAQ

The include() function takes a single string as an argument. Following arguments are ignored.
The included file must be a valid JavaScript file. If there are errors the compiler will throw an error.
The default encoding is assumed to be utf8.
You can use relative and absolute filenames, and change the root directory in plugin options.

Programmatic Invocation

Node API

const transformedCode = require('@babel/core').transform(code, {
  plugins: ['@aternus/babel-plugin-include'],
});

CLI

npx babel --plugins @aternus/babel-plugin-include main.js

Integrations

IDEs / TypeScript

The plugin ships with TypeScript types which the IDEs and TypeScript can use to understand the new include syntax capability without you having to take any action.

⚠ Keep in mind that you'll still need to use Babel as the transpiler (this is a babel plugin after all 😅)

ESLint

The plugin ships with an ESLint config you can extend to avoid getting errors about include being undefined.

In your .eslintrc.js:

module.exports = {
  extends: [
    // ...
    './node_modules/@aternus/babel-plugin-include/eslint',
  ],
  // ...
};

⚠ ./node_modules is required to ensure that ESLint won't add "eslint-config" to the package name, resulting in a wrong path.

Options

You can provide an options object to modify the default behavior of the plugin.

{
  plugins: [['@aternus/babel-plugin-include', options]];
}

The following options are available:

Option Name	Type	Default	Notes
`root`	`string`	`cwd()` of the file	The root directory from which all files will be included.
`encoding`	`BufferEncoding`	`utf-8`	The encoding option specifies which encoding to use when including files.