紧接上文,利用webpack模块化加载jquery的时候,还需要手工注册到全局变量。对于已经习惯于自动注册到全局的各位筒子来说,这是很难接受的事情。虽然就短短两句代码window.$ = jq; window.jQuery = jq;,但是写在那个位置,就是那么的有些碍眼。

苏南大叔:webpack4系列教程,如何用expose-loader注册变量到全局? - webpack-expose-loader-hero
webpack4系列教程,如何用expose-loader注册变量到全局?(图4-1)

本文说的是:webpack的一个loader,专门用于把一些变量自动注册到全局上去。本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0expose-loader@0.7.5jquery@3.5.1

安装expose-loader

能够把对象自动注册到全局的,神奇loader的名字,就叫做:expose-loader。安装代码如下:

npm i expose-loader -D

本文中的范例,这里还是以jquery为主角进行配置。所以,请确保执行了如下命令:

npm i jquery -S
jquery为例的话,是需要注册至少两个对象到全局变量的。分别是:$jQuery

苏南大叔:webpack4系列教程,如何用expose-loader注册变量到全局? - webpack-expose-loader-version
webpack4系列教程,如何用expose-loader注册变量到全局?(图4-2)

方案一,内联使用expose-loader

可以使用内联loader的方式,写在逻辑代码里面使用(苏南大叔不推荐)。例如:

import jq from "expose-loader?$!jquery";
let jq = require('expose-loader?$!jquery');
import "expose-loader?$!jquery";
require("expose-loader?$!expose-loader?jQuery!jquery");
require('expose-loader?$!jquery');
require('expose-loader?jQuery!jquery');
import "expose-loader?$!jquery";
import "expose-loader?jQuery!jquery";
import "expose-loader?$!expose-loader?jQuery!jquery";

方案二,非内联方式使用expose-loader

不过苏南大叔不是很喜欢这种把loader写到代码里面的事情。所以,苏南大叔喜欢把它放到webpack.config.js里面进行控制。

这里要先把jquery的引用,改为初始状态:

import "jquery";

或者

require('jquery');
注意:requireimport的写法不同,一个带(),一个不带()

然后修改webpack.config.js文件:

module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
    },
    output: {
        //...
    },
    plugins: [
        //...
    ],
    module: {
        rules: [
            //...
            {
                test: require.resolve('jquery'),
                use: [
                    {
                        loader: 'expose-loader',
                        options: '$'
                    },
                    {
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                ]
            },
        ]
    }
}

重点就是:

{
    test: require.resolve('jquery'),
    use: [
        {
            loader: 'expose-loader',
            options: '$'
        },
        {
            loader: 'expose-loader',
            options: 'jQuery'
        },
    ]
}

苏南大叔:webpack4系列教程,如何用expose-loader注册变量到全局? - webpack-expose-loader-error
webpack4系列教程,如何用expose-loader注册变量到全局?(图4-3)

过时的官方推荐配置

expose-loader的官方页面上,推荐的配置是如下所示的:

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        rules: [
          {
            loader: 'expose-loader',
            options: {
              expose: ['$', 'jQuery'],
            },
          },
        ],
      },
    ],
  },
};

但是在苏南大叔的实验中,似乎这个配置,在webpack@4系列中是不能识别的。报错如下:

ERROR in ./node_modules/jquery/dist/jquery.js-exposed
Module build failed (from ./node_modules/expose-loader/index.js):
TypeError: this.query.substr is not a function

实验效果

这里就贴个main.js的代码吧:

import jq from "jquery";
jq("#test").html("test3");
// window.$ = jq;
// window.jQuery = jq;
$("#test").html("test");
jQuery("#test").html("test2");

其实效果就是,省略了两句话:

window.$ = jq;
window.jQuery = jq;

有点瞎折腾的感觉。哈哈~

苏南大叔:webpack4系列教程,如何用expose-loader注册变量到全局? - webpack-expose-result
webpack4系列教程,如何用expose-loader注册变量到全局?(图4-4)

代码中的jq没有注册到全局,截图中的jq注册到了全局。

相关链接

一些适合webpack早期版本的用法,可以点击下面的链接查看:

总结

expose-loader的故事就讲这么多,其实不安装expose-loader的话,世界也是一样的美好。所以,expose-loader用或者不用,在于您心情吧~ 更多webpack相关经验文章,请点击下面的链接查看:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   jquery    webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: