Neutrino Compile Loader Middleware¶
@neutrinojs/compile-loader
is Neutrino middleware for compiling source code with Babel.
Requirements¶
- Node.js v8.3+
- Yarn v1.2.1+, or npm v5.4+
- Neutrino v8
Installation¶
@neutrinojs/compile-loader
can be installed via the Yarn or npm clients.
Yarn¶
❯ yarn add @neutrinojs/compile-loader
npm¶
❯ npm install --save @neutrinojs/compile-loader
Usage¶
@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.
Merging Babel Configuration¶
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' ] } }] ] }
Advanced merging¶
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-proposal-decorators'), require.resolve('@babel/plugin-proposal-class-properties') ] }, options));
Customization¶
@neutrinojs/compile-loader
creates some conventions to make overriding the configuration easier once you are
ready to make changes.
Rules¶
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 |
Contributing¶
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.