いつまで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') }] }, }
これでもうimport宣言の心配をする必要はありません。RequireJSやBroserifyを使っている人も、触ってみればすぐにwebpackの便利さに気づくはず!
参考:
Never import React from ‘react’
again, thanks to Webpack’s ProvidePlugin