webpack 全局变量引入——第三方模块

有时候我们的项目需要用到第三方模块，最常见的就是引入 jQuery 进行一些 DOM 操作。而第三方的模块引入也有不同的方式。

第一步安装依赖： 

npm install --save jquery

接下来一起看看它jquery的引用方式和他们之间的区别。


1. 组件内部引用


import $ from "jquery";

例如在 React 环境的 App 组件。


import React, { Component } from "react";
import $ from "jquery";
export default class App extends Component {
    constructor(){
        super()
    render() {
        console.log($);
        console.log(window.$);
        return (
                <h1>建设社会主义中国</h1>

上面的输出结果：第一个能正常输出 jQuery 函数。第二个输出 undefined。为什么呢？


答：$ 属于第三方模块，引入的时候因为闭包的影响不能暴露给全局，所以全局 windows上没有 $ 这个函数。


很明显这种引入方式我们只能在组件里面使用，但是我们在写代码的时候不可能只在这一处用到。所以这种方式并不是太好用。


2. expose-loader 全局引入


既然我们想把 jQuery 暴露给全局，那就来实现：


先安装依赖，借用 expose-loader 来实现。


npm install -S expose-loader

expose 使用有两种方法。

(App)组件内部直接暴露：

import $ from "expose-loader?$!jquery";
在 webpack.config.js 里面进行配置：

module: {
  loaders: [
    { test: require.resolve("jquery"), loader: "expose-loader?$" }

这时候在像一一样在组件内部引入，就会发现：


import React, { Component } from "react";
import $ from "jquery";
export default class App extends Component {
    constructor(){
        super()
    render() {
        console.log($);
        console.log(window.$);
        return (
                <h1>建设社会主义中国</h1>

windows.$已经输出结果和$相同。说明 $ 已经暴露给全局了。


三、引入webpack 插件


你没看错，这个插件的就是从 webpack 上面引出来的。providerPlugin 就是提供全局变量。注意这个东西只是在每个模块注入全局变量而已。


使用配置 webpack.config.js ：


const webpack = require("webpack");
plugins: [
    new webpack.ProvidePlugin({
        $     : 'jquery',
        jQuery: 'jquery'

这时候我们来看 App 组件输出情况：注意这个没有import $ from "jquery"。


import React, { Component } from "react";
export default class App extends Component {
    constructor(){
        super()
    render() {
        console.log($);
        console.log(jQuery);
        console.log(window.$);
        return (
                <h1>建设社会主义中国</h1>

输出结果是： $ === jQuery，windows.$ === undefined，结果很明显，我们组件内部并没有引入 jQuery 包，但是依然能够打印出 jQuery 函数，说明 providerPlugin 确实为每个模块注入了 jQuery。但是注入的jQuery并不是全局的，所以 windows.$ 或 windows.jQuery 是 undefined。


四、首页引入


最后我们来一个最原始的方法。首页 index.html 里面通过 script 标签引入 jQuery CDN 在线加速包。


<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>

index.html 文件：


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>冲突时，以我template为准</title>
</head>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <!-- 注意jQuery的在 div.id 之前引入 -->
    <div id = "app"></div>
</body>
</html>

毫无疑问，jQuery被暴露给全局了，在组件的任何地方我们都能访问到 jQuery。


但是要注意的是，在全局引入 jQuery 的话，组件内部直接使用就完了，就没必要在去：


import $ from "jquery";

如果你再 import 的话，jQuery 会被打包，这会导致打包文件过大的效果，但是如果你非要这样的话，可以设置 一下 webpack.config.js 。


module.exports = {
    externals: {
        jquery: '$'