回望初心，笑看那年盛夏

我猜你肯定是被标题吸引了，其实，你没看错，这是一篇”记叙文”或者说是”议论文”。

前言

开头的话，我可以义正言辞的声明，我肯定不会在本文中去写代码或者技术啥的，因为男人的嘴骗人的鬼。

引子

回望初心，初心是什么呢？初心当然是在技术的海洋里自由翱翔，曾经写过毕业于MIT大学，因为热爱开源，当然也想站在开源的立场去更多的对待技术。

大智若愚说的是那些智者，回首毕业这么久，我遇到了很多人，也结识了一些志同道合的技术人，像小夕，淘戏卡字辈……

每当深夜去读大家的文章的时候，总有一种望尘莫及的感觉，在深思，我能不能像这样，然后又给自己打气：我能这样，我可以的，完全没问题，那一字一句中，透露着那个时候的不羁与中二。

看过《惊悚乐园》，至今怀念不觉与若雨那种情调，怀念甚至向往一代笔者的风范（我不会告诉你至今我还文笔稚嫩，稚嫩到半天写技术爽文章的时候，憋不出一句屁来。），害！算了，那段过去的，就让它过去吧。

我有时候确实想过，去做一个好的作者，去做一个好的技术产出者，或许是疲于内卷，难道我的目标就是成为卷王？一次又一次的在内心呐喊，向着那个另一面的自己（我相信一个人存在双重人格，真的，我相信），这个时候的我应该露出玩味的笑容，然后看着你：嗨，好兄弟（好姐妹），你看过《暗黑魔女库伊拉》吗？就那个一半头发白的，一半头发黑的，拥有者双重人格的外国女人。当然这里的”外国女人”不包含任何歧视的语气，女主还是很漂亮的……

不好意思，又扯远了，刚刚我们聊到了初心，然后到了内卷，然后到了库伊拉（电影）接下来，我要介绍的那年盛夏：

正文

那年盛夏究竟发生了什么呢？

此处省略10w字。

番外篇：AMD\UMD|CMD|CJS|ESM究竟怎么玩，怎么玩？

第一个怎么玩的意思就是怎么去认识它，了解它：

像我们了解鲁迅先生，从百草园到三味书屋，再到儿时的玩伴少年闰土……

AMD：将代码写成让浏览器认识的样子。

1
2
3
4

define(['jQuery'], function ($) {
    // todo some
});

它作为Require.js的模块定义规范，（这里提一嘴，Require.js是什么呢？RequireJS不是框架，是模块加载器；）

虽然我不太了解，甚至只有在刷面试题的时候才了解，但是不得不说这是时代的产物，是ES Module之前的杰作，其实想一想jQuery，在React、Vue、Angular、Sevlte…..这些杰作未出来之前，再想想，从真实DOM到虚拟DOM。这些东西都是时代的产物，过去的东西并没有死去，过去的东西只是慢慢的在被取代。

CMD是在sea.js中被提出来的，当然也是针对于浏览器端。

只不过针对与AMD而言，它属于哪里需要再在哪里加载。

1
2
3
4
5
6
7

define(function(require, exports, module) {  
	    var a = require('xxx.js')
	    console.log(a)
	    var b = require('yyy.js')
	    console.log(b)
	})

但是这里的就地加载，并不是说，碰到require再去加载：

可以看下sea.js的源码中是这样干的。

1
2
3
4
5

window.define = function(callback) {
    var id = getCurrentJs()
    var depsInit = s.parseDependencies(callback.toString())
    var a = depsInit.map(item => basepath(item))
}

其实用大白话讲就是，AMD&CMD都是会提前加载所有模块，但是AMD是加载完就执行，而CMD是碰见require再执行。

当然也可以推翻市面上的说法：

ADM 是异步的，CMD是同步的。

加载当然都是异步的，只不过CMD执行是一个同步过程。

CJS：CommonJS

不要被CJS吓到了，这玩意儿就是个缩写：

1

var _ = require('lodash');

适用于Node端的模块加载使用方案，同步引入。

这里可以顺带提一口，TS下的引入：

1

import _ = require('lodash')

这种语法是合乎规范的：

可以参见： https://www.typescriptlang.org/docs/handbook/modules.html

也可以看看stackoverflow上，大佬们的讨论： https://stackoverflow.com/questions/52534910/difference-between-import-x-requirex-and-const-x-requirex-in-typ

UMD：既适用于Node端，也适用于客户端

可以理解为AMD/CMD/ESM + CJS的结合。

看过常用库（jQuery,pubsub.js）的同学肯定见过如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function (root, factory) {
            if (typeof define === 'function' && define.amd) {
                // AMD
                define(['jquery'], factory);
            } else if (typeof exports === 'object') {
                // Node
                module.exports = factory(require('jquery'));
            } else {
                // 浏览器全局变量(root 即 window)
                root.returnExports = factory(root.jQuery);
            }
        }(this, function ($) {
            return {};
        }));

ESM也是大势所趋，浏览器端支持良好，Node端也开始慢慢支持

对于时下，广为人知的几个模块，我们先讨论到这里，这里可以先打个预备草稿：

另外一个玩一玩，当然指的是，知道他们后，抛砖引玉，去玩一玩主流的打包工具：

像rollup、gulp、webpack、tsdx……

真的太多太多了，但是各有优势，然后我想，我还可以就这个打包工具再出一篇文章：《从零开始打造组件库/工具库》

期待下一期再与你见面～