闭包的前世今生-04-闭包与类库封装、模块化（Webpack）「这是我参与2022首次更文挑战的第5天，活动详情查看：2

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

类库封装

闭包与即时函数另外一个非常重要的用途就是类库封装。

现实中我们有很多种类库封装的方式，比如ESModule，CommonJS，直接运行在浏览器中的。

我们来封装的就是可以直接运行在浏览器中的即时函数的应用的封装。

那么类库封装有什么要求呢？

类库封装最重要的要求就是不能让类库中的变量污染全局。

我们可以从Jquery的代码中找到起步的思路，比如只暴露$

代码示例如下

(function() {
    var jQuery = window.$ = function() {
        // somting
    }
})()

Rollup中也有使用即时函数life是打包方式之一。

Rollup创建以life的方式进行输出

   npx rollup -f life -n $ -o ./dist/jquery.js ./src/jquery.js

我们将下面的最简代码使用rollup来进行一下输出

export default function jquery() {
    console.log(1111);
}

输出结果为

var $ = (function(exports) {
    "use strict";
    
    function jquery() {
        console.log(1111);
    }
    
    return jquery;
})()

webpack是一个静态资源打包器，使用它可以很方便的将我们的资源来进行打包构建，将资源方便的构建在一起。

我们先写一个js文件，a.js，实现如下功能功能

const data = Date.now();
module.exports = "A: " + data;

再创建一个index.js来引用这个文件

const str = require("./a.js");
console.log(a)

我们可以在这个项目中 npm init一下npm的包

然后执行 npx webpack

执行完毕后会输出一个IIFE函数中包含着运行逻辑的一个合并方法，大家可以自己去试一下，这里就不贴了。

以上就是这次闭包及其整理的一个相关的整理

下面是整个闭包系列的指路，欢迎大家积极留爪～～～

这是我JS闭包系列的文章合集