react-loader

@constgen/neutrino-react-loader

Neutrino middleware for React files

This middleware already includes @constgen/neutrino-babel-loader

Features

This middleware enables many features by default with zero configuration

• Typescript support
• Decorators
• Class properties
• Babel transpilation according to browserlist
• EcmaScript polyfills
• Automatic React runtime inject to every JSX file
• Resolve URLs in JSX like in HTML for these elements: img[src], link[href], Image[src], video[src], video[poster], Video[src], source[src], audio[src], Audio[src]
• Remove prop types in production

Requirements

• Node.js v10+
• Neutrino v9
• Webpack v4

Installation

@constgen/neutrino-react-loader can be installed from NPM. You should install it to "dependencies" (--save) or "devDependncies" (--save-dev) depending on your goal.

npm install --save @constgen/neutrino-react-loader

Usage

In preset

Require this package and plug it into Neutrino. The following shows how you can pass an options object to the middleware, showing the defaults:

let reactLoader = require('@constgen/neutrino-react-loader')

neutrino.use(reactLoader({
   babel    : {}, // custom Babel options
   polyfills: false, // enable EcmaScript polyfills
   browsers : ['defaults'], // replace browserlist config
   node     : undefined, // node version in case of server rendering
   include  : [], // include strategy is always used and you can only extend what is included besides `neutrino.options.source` and `neutrino.options.tests`
   exclude  : [] // exclude something from processing that is included
}))

You may enable usage of .browserslistrc file in your project by setting browsers option to any falsy value

neutrino.use(reactLoader({
   browsers: undefined // inherit config from `.browserslistrc` or disable if absent
}))

In neutrinorc

The middleware also may be used together with another presets in Neutrino rc-file, e.g.:

.neutrinorc.js

let reactLoader = require('@constgen/neutrino-react-loader')

module.exports = {
   use: [
      reactLoader()
   ]
}