react-noparse
⚠️ Experimental
This is a webpack configuration helper that aims to improve build times by providing an simple way to exclude large dependencies in development environments. Instead of having webpack load and parse the entire module (and dependency tree), we just use the distributable UMD build instead, like loading from a CDN except it's right on our disk.
I wanted to make this extremely easy to drop into your project, quickly evaluate the impact and remove just as easily.
This tool can be added with a single line of code and removed just as easily. The source is extensively commented, and the tests demonstrate the different configuration options.
How it works:
There are several steps to setting up this configuration:
- Tell webpack to exclude the module (see
module.noParse
) - Configure a resolver, so we can still use
require
andimport
(seeresolve.alias
) - Optionally expose
React
, if needed (seeimports-loader
)
This module returns a function that will handle the above mutations on your webpack configuration.
Installation
npm install --save-dev react-noparse
Basic Usage
Please see the tests and example. Adding react-noparse
to your project is dead simple:
const path = const webpack = const noParse = noParse // 1. Grab module const config = devtool: 'cheap-module-eval-source-map' entry: 'webpack-hot-middleware/client' './src/index' output: path: path filename: 'bundle.js' publicPath: '/dist/' plugins: webpack webpack module: loader: test: /\.js$/ loaders: 'babel' include: path moduleexports = config // 2. Use defaults: React, ReactDOM, ReactRouter // 3. That's it!
Output:
devtool: 'cheap-module-eval-source-map' entry: 'webpack-hot-middleware/client' './src/index' output: path: '<path-to-project>/dist' filename: 'bundle.js' publicPath: '/dist/' plugins: webpack webpack module: loaders: test: /\.js$/ loader: 'babel' include: '<path-to-project>/src' test: /\.js$/ // expose React loader: 'imports?React=react' noParse: /\/react\//g /\/react-dom\//g /\/react-router\//g resolve: alias: 'react$': '/node_modules/react/dist/react.js' 'react-dom$': '/node_modules/react-dom/dist/react-dom.js' 'react-router$': '/node_modules/react-router/umd/ReactRouter.js'
Configuration
In the example above we're using a shorcut syntax with noParse
by passing true
, which uses the built-in defaults
object:
// ...moduleexports = config
The defaults can be used individually, for example if you only needed React + ReactDOM:
const defaults = defaults// ...moduleexports = config
Notes
- the
distPath
must point to a UMD build - you cannot
import x from 'module/x'
, you mustimport { x } from 'module'
API
noParse(libs, useMin)
:mutatorFn(WebpackConfig)
:WebpackConfig
Process libs and return a function that accepts a webpack configuration and appliesmutatations
Param | Type | Description |
---|---|---|
libs |
bool | Array<Object> | Array<String> |
All, Path, or Array of Paths(s) to UMD builds |
libs[].distPath |
string |
String of path to dist (required) |
libs[].importReact |
boolean |
Whether or not to expose react |
useMin |
boolean |
Use minified (default=true in production ) |
defaults
:Object
Provide some common configuration defaults:
React
:{ distPath: 'react/dist/react.js' }
ReactDOM
:{ distPath: 'react-dom/dist/react-dom.js', importReact: true }
ReactRouter
:{ distPath: 'react-router/umd/ReactRouter.js', importReact: true }
© 2016 Justin Greenberg MIT License