react-noparse v0.0.1

react-noparse

:warning: 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:

0. Tell webpack to exclude the module (see module.noParse)
1. Configure a resolver, so we can still use require and import (see resolve.alias)
2. Optionally expose React, if needed (see imports-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 = require('path')
const webpack = require('webpack')
const noParse = require('react-noparse').noParse   // 1. Grab module

const config = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  plugins: [
    webpack.HotModuleReplacementPlugin(),
    webpack.NoErrorsPlugin()
  ],
  module: {
    loader: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
}

module.exports = noParse(true)(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.HotModuleReplacementPlugin(),
    webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loader: ['babel'],
      include: '<path-to-project>/src' 
    }, {
      test: /(react-dom|react-router)\.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:

// ...
module.exports = noParse([
  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
  }
])(config)

The defaults can be used individually, for example if you only needed React + ReactDOM:

const defaults = required('react-noparse').defaults
// ...
module.exports = noParse([
  defaults.React,
  defaults.ReactDOM
])(config)

Notes

• the distPath must point to a UMD build
• you cannot import x from 'module/x', you must import { x } from 'module'

API

© 2016 Justin Greenberg   MIT License