最新のjavascriptで開発している場合、ほとんどすべてのモジュールにそのような行のシートが含まれています。
import React from 'react' import $ from 'jquery' ...
結局のところ、これらの行のほとんどは書くことができず、その生成を自動化に任せています。 そして、この新しいウェブ
パックはこれを助けて
くれます。結局のところ、嬉しい驚きに満ちています。 よく知られているファイルの
必要と
インポート 、および
ハブで既に説明した「ホットモジュール置換」に加えて、
webpackはソースコードを分析し、使用されるリテラルに基づいて必要なモジュールを自動的に含めることができます。 カットの下-この魔法の仕組みの簡単な説明。
ソースの分析と
インポートディレクティブの自動作成のために、
webpackに組み込まれ、インストールを必要としない特別な
ProviderPluginプラグインが必要です。 魔法が機能するためには、
wbpack構成ファイルでプラグインを指定し、
それに識別子とモジュールのリストを提供する必要があります。 ご存知のように、
webpackは
esprimaパーサーを使用しているため、コードの構造を非常に正確に把握しています。 ソースで指定された識別子を検出すると、webpackは
importまたは
requireの場合と同じ方法で指定されたモジュールのロードコードを生成し
ます 。 構成ファイルの断片：
module.exports = { plugins: [ new webpack.ProvidePlugin({ 'React': 'react', ...
例の構成でプラグインを使用する場合、
webpackは
React識別子の使用を探します。 この行は無視されます。
const foo = "React";
そしてこれさえ：
bar.React = true;
しかし、これに会ったので、
ReactJSがこのモジュールで使用され、対応するモジュールのロードコードをバンドルフラグメントに提供することをすぐに理解できます。
React.createClass(…)
そしてもちろん、誰も
ReactJSだけに制限しませ
ん 。 人気のあるライブラリやプロジェクトで頻繁に使用されるモジュールにこのメソッドを使用して、コードを簡潔かつ単純にします。
new webpack.ProvidePlugin({ '$': 'jquery', '_': 'lodash', 'ReactDOM': 'react-dom', 'cssModule': 'react-css-modules', 'Promise': 'bluebird' })
PS
私のように、古い
requireの代わりに
ES6インポートを使用したい
場合 、
webpackの ローダーとして
babelを指定することでこれを
行います。 また、
.babelrcと
プリセットを忘れないでください
-babelの最新バージョンでは
、開発者は初心者のために驚きを用意しました。
module.exports = { module: { loaders: [{ test: /\.js$/, loaders: ['babel'], ...