七天开发一个js工具库一：让示例运行起来

发表于 更新于

本文属于原创文章，转载请注明–来自桃源小盼的博客

最近在日常开发中，发现一个工具方法会出现多个项目中，每次在新项目中开发时，都是去原先的项目中复制粘贴。

一是很麻烦，因为经常想不起来在哪个项目中写过，就得花点时间找一找。还有，有的项目用了ts，而有的是js，就得复制过来再修改一下。

二是质量不高，一般就是够自己用的，或者够项目用的就行了，也不会过多考虑通用性，当然也不会有单元测试。

所以萌生了用当下最优的技术组合来写一个js工具库的想法，说干就干。

让我们开始吧，先定一个你喜欢的名字，什么神仙、超级英雄、阿猫阿狗啥的，喜欢最重要，你喜欢就代表你把它当成了自己的一部分，我这里就叫doraemon（哆啦A梦）了。

写作思路

先说一下这个系列写作的基本思路：

第一点：实践优先

很多网上教学的课程都是从基础甚至历史开始讲起的，这和我们九年义务教育的方法是一致的，但是不是高效的学习方式呢？上周翻了下支付宝的前锋营的课程，也是如此，上来先是讲前端是什么、前端的未来、JavaScript 语法进阶、TS 基础、环境搭建等。从基础学不是不好，只是效率不高，可以有更好的方式。

我倾向的方式是实践为主。先从中间开始，教流程性的知识，让大家知道如何 run 起来，先有个手感，形成骨架。然后再逐渐往前讲基础，往后讲深度，逐渐加入事实性和概念性的知识。先有流程性的骨架，后续的知识才更容易粘附在上面。

———云谦和他的朋友们

先coding起来，这样代入感和成就感都会很强，我个人也偏爱这种方式。每次学习新知识，都迫不及待地想写点代码，运行一下。

然后再说为什么这么写，为什么这么想。

最后再适时地介绍一些相关资料，方便你深入研究。

第二点：暴露隐性知识

为什么那些跟在大神身边的人，水平也不会差呢？因为耳濡目染，简单说就是看到了大神怎么做，就模仿着来，渐渐地自己也变得厉害了。

所以我打算把相关的事情、写代码过程中的习惯、思考和选择在恰当的时候说出来。让你感到更真实，更日常。最好是感觉咱俩一起在写代码（结对编程）。

准备事项

node16.x.x，尽量与我的一致，避免出错造成麻烦。

创建项目

我们选择去github创建一个仓库，你也可以选择国内的gitee。

这里假设你已经会使用git，也拥有github账号。

当然你可以不使用git，但我强烈建议你这样做，这样你会清晰地看到每次的提交和改变，还能留个记录，以备日后参考。

创建目录和文件

新建src目录，源码都放在这个目录下，在src下创建index.js。

新建examples目录，用来写示例和调试代码，在examples下创建index.html。

看一下我们的目录结构：

1
2
3
4
├── examples
│  └── index.html
└── src
   └── index.js

复制一个你最常用的函数，粘贴到index.js里。

1
2
3
4
5
// index.js
// 这个函数的作用是展开打印一个对象
function logger(data) {
 console.log(JSON.stringify(data, null, 4))
}

在index.html中引用index.js，因为我们的工具库要在浏览器环境使用，所以不能在node环境来运行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>doraemon</title>
</head>
<body>
</body>
<script src="../src/index.js"></script>
<script>
  logger({
    name: 'doraemon',
    age: 0,
    type: 'cat'
  })
</script>
</html>

让我们测试一下这个函数能否正确执行。打开index.html，打开控制台。看到输出：

1
2
3
4
5
{
    "name": "doraemon",
    "age": 0,
    "type": "cat"
}

现在看起来还太简单，不要着急。

提交代码

让我们提交当前的代码。提醒一下，要养成完成一个case提交一次代码的习惯。

如果你熟悉git命令，我推荐也使用一下sourcetree或其他的git可视化工具。如果你熟悉sourcetree，那么我推荐你熟悉一下git命令。我的日常是这两种方式都会使用。

可能提交时会发现多了编译器的缓存目录，在跟目录下新建一个.gitignore文件。这里是忽略了webstorm和vscode。

1
2
.vscode
.idea

接下来我们要将src下的代码改造成真正的js库，不过先让我们给js库搭建一个使用的项目。

搭建使用库的环境

让我们在examples目录下有所作为吧，可以把examples目录理解是我们的某个业务项目，把lodash理解为我们的doraemon。

以后再具体说为什么使用下面的技术组合。

1
2
3
4
5
6
7
8
9
10
// 我们使用pnpm做包管理，先全局安装pnpm
npm install -g pnpm@next-7

// 安装examples依赖
cd examples

// 初始化package.json
npm i -y
pnpm i esbuild -D
pnpm i lodash -S

在examples目录下新建入口文件main.js，随便引用一个lodash的函数，将结果输出到页面中。

1
2
3
4
5
6
7
// examples/main.js
import _ from 'lodash'

const result = _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 })

const app = document.getElementById('app')
app.innerHTML = JSON.stringify(result)

在index.html增加节点#app，修改引入的js。

1
2
3
4
5
6
7
8
9
10
11
12
// examplse/index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>doraemon</title>
</head>
<body>
  <div id="app"></div>
</body>
<script src="./main.js"></script>
</html>

在package.json中定义dev命令，esbuild把examples，目录作为应用目录，服务运行在3000端口。

1
2
3
"scripts": {
  "dev": "pnpm esbuild main.js --serve=3000 --servedir=./ --bundle"
},

运行

1
2
cd examples
pnpm dev

浏览器访问http://127.0.0.1:3000/，此时可以看到输出的结果：

1
{"a":1,"b":2}

.gitignore增加忽略node_modules，提交代码。

下一节让我们将替换examples中的lodash为自己的doraemon。

源码：https://github.com/hanmingpan/blog-demonstration/tree/main/doraemon/day1

我使用的软件

  • macos
  • iterm2+zsh
  • sourcetree
  • webstorm

推荐阅读