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 对象的 $ 属性上。这样一来，就得到了一个全局变量 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！
网友评论