いつまでimport Reactしているつもり？ Webpack-ProviderPlugin

1日に何回このようなimport宣言を書いていますか？

import React from 'react'
import ReactDOM 'react-dom'
import $ from 'jquery'

ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。

そこで活躍するのがWebpackのProviderPluginです。使い方は次のように、インスタンス内に変数に対応するモジュールを定義します。

new webpack.ProvidePlugin({
  'React':      'react',
  'ReactDOM':   'react-dom',
  '$':          'jquery',
  'jQuery':     'jquery'
})

webpack.consfig.jsはこんな感じになります。

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './scripts/index'
  ],
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      'React':      'react',
      'ReactDOM':   'react-dom',
      '$':          'jquery',
      'jQuery':     'jquery'
    })
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'jsx?harmony'],
      include: path.join(__dirname, 'src')
    }]
  },
}