@neutrinojs/compile-loader
is Neutrino middleware for compiling source code with Babel.
- Node.js v6.10+
- Yarn or npm client
- Neutrino v7
@neutrinojs/compile-loader
can be installed via the Yarn or npm clients.
❯ yarn add @neutrinojs/compile-loader
❯ npm install --save @neutrinojs/compile-loader
@neutrinojs/compile-loader
can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
// Using function middleware format
const compile = require('@neutrinojs/compile-loader');
neutrino.use(compile, {
include: [],
exclude: [],
babel: {},
ruleId: 'compile',
useId: 'babel'
});
// Using object or array middleware format
module.exports = {
use: [
['@neutrinojs/compile-loader', {
include: [],
exclude: [],
babel: {},
ruleId: 'compile',
useId: 'babel'
}]
]
};
include
should be an array of paths to include in the compilation. Maps to webpack'sRule.include
exclude
should be an array of paths to exclude from the compilation. Maps to webpack'sRule.exclude
babel
is a Babel configuration object, consumed by babel-loader. Use this to set properties such aspresets
,plugins
, andenv
.ruleId
is the identifier to the compiler loader rule. Override this to add an additional compile-loader instanceuseId
is the identifier for the babel loader. Override this to change the identifier.
This package also exposes a function for merging Babel configurations. This comes from the babel-merge package.
const { merge } = require('@neutrinojs/compile-loader');
const together = merge(
{
presets: [
['babel-preset-env', {
targets: {
browsers: ['latest 1 Chrome']
}
}]
]
},
{
presets: [
['babel-preset-env', {
targets: {
browsers: ['latest 1 Firefox']
}
}]
]
}
);
console.log(together);
// Logs:
{
presets: [
['babel-preset-env', {
targets: {
browsers: [
'latest 1 Chrome',
'latest 1 Firefox'
]
}
}]
]
}
Should you need to do merging of Babel configuration that is more advanced than this, such as re-ordering the options,
you will need to tap
into the existing Babel options to do so. This still involves using the compile-loader's
merge
function.
Example: enable current decorator syntax in the compile loader:
const { merge } = require('@neutrinojs/compile-loader');
// Decorators generally need to be enabled *before* other
// syntax which exists in both normal plugins, and
// development environment plugins.
// Tap into the existing Babel options and merge our
// decorator options *before* the rest of the existing
// Babel options
config.module
.rule('compile')
.use('babel')
.tap(options => merge({
plugins: [
require.resolve('babel-plugin-transform-decorators-legacy'),
require.resolve('babel-plugin-transform-class-properties')
]
}, options));
@neutrinojs/compile-loader
creates some conventions to make overriding the configuration easier once you are
ready to make changes.
The following is a list of rules and their identifiers which can be overridden:
Name | Description | Environments and Commands |
---|---|---|
compile |
Compiles JS and JSX files from the src directory using Babel. Contains a single loader named babel . |
all |
This middleware is part of the neutrino-dev repository, a monorepo containing all resources for developing Neutrino and its core presets and middleware. Follow the contributing guide for details.