webpack入門學習筆記09 —— 在項目中引入全局變量

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.$);
複製代碼

可能上面的代碼你看着有些頭暈，我來說解一下：

1. 首先經過 import 命令，從安裝的jquery包中導入一個對象，將這個對象命名爲 $1 ，$1 不是全局對象。
2. 經過 expose-loader?$!jquery 命令，從安裝的jquery模塊中導入一個對象，將這個對象添加到 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. 寫在後面

上面介紹了兩種設置全局變量的方式，就我我的來講，比較喜歡第一種，你們能夠根據須要和喜愛，自行選擇。

這就是本篇博客的所有內容了，你們加油，學懂webpack！

上一篇: webpack入門學習筆記08 —— 使用ESLint檢查項目代碼

下一篇: webpack入門學習筆記10 —— 在項目中使用圖片資源