Webpack入門学習ノート09-プロジェクトにグローバル変数を導入

6756 ワード
webpack Webpack
1.前に書く
プロジェクトをするとき、私たちはよくこのようなシーンに遭遇するかもしれません.変数は多くのファイルで使用されます.この変数は、サードパーティ製パッケージや、自分で定義したツールクラスオブジェクトなどです.
たとえばjQueryベースのマルチページアプリケーションでは、各ページでjQueryオブジェクトに使用されます.単一ページアプリケーションでは、すべてのコンポーネントでメッセージプロンプトボックスが使用されます.
このとき私たちはどうすればいいのか、すべてのページでこの変数を引用すれば、作業量が多く、プロジェクトのメンテナンスにも友好的ではありません.このブログでは、グローバル変数を効率的かつ容易に導入する方法について説明します.主な内容は次のとおりです.
  • webpackモジュールを使用してグローバル変数
    • を登録する
  • 変数をwindowオブジェクトに露出するグローバル変数
    • となる.
    jqueryオブジェクトを例に、webpackベースのプロジェクトにグローバル変数を注入する方法を説明します.まずjqueryパッケージをインストールします.
    yard add jquery

    2.webpackモジュールを使用してグローバル変数を注入する
    ここで特に注意してください.webpackはプロジェクトを構築するのに役立つツールです.このツールには、同じ名前のモジュールがあります.webpackと呼ばれています.今日はこのモジュールを使用して、ページやコンポーネントごとにオブジェクトを注入します.
    構成のルールは簡単ですが、ここではwebpackを先に示します.config.jsファイルの構成コードを説明します.
    /*     ，           */
let Webpack = require('webpack')    //   webpack  

module.exports = {
     
    plugins: [      //       ，    plugins     
        new Webpack.ProvidePlugin({
     
            $: 'jquery'
        })
    ],
}

    ここでは他の構成ルールを省略します.他の構成ルールを見たい場合は、私のGitHub倉庫-webpack-learningを表示したり、本明細書の末尾のリンクを通じて、私の前のブログにジャンプして表示したりすることができます.
    上記の構成の役割は、プロジェクト内の各ファイルに、インストールしたjqueryパッケージであるオブジェクト$を注入することです.インストールが完了すると、他のページに導入する必要がなく、jQuery構文を使用できます.例えばある.jsファイルには以下のコードが書かれています.
    console.log($)
console.log($(window));

    プロジェクトが起動すると、jqueryオブジェクトと選択したwindowオブジェクトがコンソールに出力されます.このことから,グローバル変数の登録に成功したことが分かる.
    3.変数をwindowオブジェクトに露出し、グローバル変数にする
    フロントエンドの開発に携わるプログラマーは、JSのグローバル変数がwindowオブジェクトの属性またはメソッドであることを知っているので、プロジェクトで変数をwindowオブジェクトの属性またはメソッドに設定できれば、グローバル変数となり、他のファイルで使用することができます.
    この目的を達成するには、expose-loaderを使用して、まず次のコマンドを実行してインストールします.
    yarn add expose-loader -D

    expose-loaderは、ファイルでバイトで使用することもできるインラインloaderである、もちろんwebpackでもよい.config.jsプロファイルで使用します.まず、このloaderをファイルで使用する方法について説明します.
    プロジェクトにindexがあると仮定します.jsファイルは、このファイルで$オブジェクトをwindowオブジェクトに露出し、グローバル変数にすると、次のコードを書くことができます.
    import $1 from 'expose-loader?$!jquery'	//   jquery  ，        window $  

console.log($1)
console.log(window.$);

    上のコードはめまいがするかもしれませんが、説明します.
  • まずimportコマンドにより、インストールされたjqueryパッケージからオブジェクトをインポートし、このオブジェクトを$1と命名します.$1はグローバルオブジェクトではありません.
  • expose-loader?$!jqueryコマンドにより、インストールされたjqueryモジュールからオブジェクトをインポートし、windowオブジェクトのこれにより、グローバル変数∗∗w i n d o wが得られる.**を選択します.これにより、グローバル変数*windowが得られる.∗∗属性上.これにより、グローバル変数すなわち$です.

    • ファイルでインラインloaderを使用してグローバルオブジェクトを設定するのが好きでない場合は、webpac.config.jsファイルでは、構成を行い、構成コードは以下の通りです.
    module.exports = {
     
    module: {
     
        rules: [{
     
                test: require.resolve('jquery'),    //      jquery   
                use: 'expose-loader?$'              //    expose-loader     
            }
        ]
    }
}

    そしてindexでjsファイルにjqueryパッケージが正常に導入されると、webpackはexpose-loaderを使用してグローバル変数を自動的に暴露します.index.jsファイルコードは以下のように参照されます.
    import $1 from 'jquery'		//     jquery 

console.log($1)
console.log(window.$);

    このように設定後、他の.jsファイルでは、jqueryをインポートする必要がなく、便利で速いです.
    4.後ろに書く
    以上、グローバル変数を設定する方法を2つ紹介しましたが、個人的には1つ目が好きで、必要と好みに応じて、自分で選ぶことができます.
    これが本ブログのすべての内容です.皆さん、頑張って、webpackを勉強してください.
    DOMによる文字の上下ローテーション効果を簡単に実現
    jQueryベースのキーボードイベントリスニングコントロール