webpack4系列教程，如何用expose-loader注册变量到全局？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

安装expose-loader

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

npm i expose-loader -D

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

npm i jquery -S

以jquery为例的话，是需要注册至少两个对象到全局变量的。分别是：$和jQuery。

方案一，内联使用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');

注意：require和import的写法不同，一个带()，一个不带()。

然后修改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'
        },
    ]
}

require.resolve('jquery'),意思就是当检测到import jquery或者require('jquery')时,就把jquery的返回的对象，挂载到window上，也就形成了window.$或者window.jQuery对象。

过时的官方推荐配置

在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;

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

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

相关链接

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

• https://www.webpackjs.com/loaders/expose-loader/
• https://www.npmjs.com/package/expose-loader
• https://github.com/webpack-contrib/expose-loader

总结

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

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。