Webpack ProvidePlugin：javascriptモジュールの開始時にインポート/必須シートを記述しない方法

最新の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'], ...