我是如何把用JS实现的数据结构上传至npm并使用的

这是我参与8月更文挑战的第N天，活动详情查看：8月更文挑战（已经更文4天）

前言

最近在整理github的时候，发现了以前在学习数据结构时用JS封装的一些数据结构的集合的一个项目。当时为了阅读和调试方便，就用的中文的目录，具体可看这里。现在打算把它放到npm上，这样就可以在其他项目中都用到自己封装的这些数据结构了。在这里记录一下这个过程，如果有不了解npm发布流程的小伙伴，不妨可以看看。

创建一个npm项目

想要发布一个npm包，那么第一步肯定是你先得有一个npm包，我们通过命令去创建一个项目：

mkdir k-datastructures && cd k-datastructures
npm init -y

package.json

这样，我们就得到了一个npm的项目。你会发现里面多了一个叫package.json的文件，那么这个文件的作用是什么呢？

package.json是你这个npm包的一个说明书，里面记录了这个包的一些基本信息（包名、版本信息、作者、描述等），以及这个npm包所依赖的其他模块（其他npm包）。

我们再看下package.json，看下这个json文件里的每个键值对代表着什么意思：

{
  "name": "k-datastructures",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

name：npm的包名，这个包名必须是唯一的，你要发布这个包，就不能跟之前存在的包名重复。而且它由小写英文字母、数字和下划线组成，不能包含空格。
version：你这个npm包的版本信息，符合语义化版本识别规范的版本字符串。
description：项目描述。
main：项目的入口文件，这个很重要，别人引用你的包的入口地址。
scripts：指定运行的脚本命令行缩写。比如"dev": "node build/dev-server.js"，你只需要输入命令npm run dev就相当于启动了命令node build/dev-server.js，这样可以自定义一些命令，简化你的输入。
keywords：关键词数组，便于用户搜索到我们的项目。
author：该npm包的作者的名字。
license：项目许可证，让使用者知道是如何被允许使用此项目。默认是ISC。
dependencies，devDependencies：在上面的package.json中没有展示出来，因为我们还没有依赖别的npm包。这两个代表了项目运行所依赖的模块、项目开发所需要的模块。两个键分别指向两个对象，每个对象维护各自的成员，分别为模块名和对应的版本。

好了，到这里基本介绍了一下package.json，我们现在继续。

引入代码

因为我打算发布的代码，之前都是中文的目录，而且是直接在全局注册每一个数据结构的构造函数，这样肯定是不行的。所以我们现在需要优化下目录，以及使用模块导出我们的数据结构。

之前

因为这部分与我们npm发布流程无关，所以我就省略了具体的过程。

之后

基本上就是把目录改为英文，并且把每个数据结构的构造函数当作模块导出，在main.js中引入汇总并且导出。

之前讲过了，package.json中的main表示了项目的入口文件，所以我们要改一下我们的package.json:

package.json

{
  "name": "k-datastructures",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "zhouxiaolei",
  "license": "ISC",
  "devDependencies": {}
}

ok，现在我们的npm包以已经准备就绪了，可以进行发布的操作了。

注册npm账号

想要发布npm包，除了有一个npm包之外，还需要有一个npm的账号。我们进入npm官网，先去注册一个账号。

具体的注册流程这里就不展开了。当你有了npm账号之后，我们就可以进行发布了。

发布npm包

发布

登录成功后，我们再进入自己的npm包目录下，通过npm publish去发布自己的npm包。

PS：为了演示我之前发布过几次版本，所以现在的版本号是1.0.4。

当显示这样子的时候，就代表已经发布成功了。我们可以去npm的官网，登录自己的账号查看已经发布的包：

使用

当我们发布完成了之后，使用就非常的简单了。

我们新建一个项目：

mkdir test && cd test
npm init -y
npm i webpack webpack-cli -D

引入我们的npm包

npm i k-datastructures -D

然后创建一个src文件夹并在其下面创建一个index.js。

src/index.js

import datastructures from "k-datastructures";

console.log(datastructures);

const { Queue } = datastructures;

const q = new Queue();
q.enqueue("Meredith");
q.enqueue("Cynthia");
q.enqueue("Jennifer");
console.log(q.toString());

引入了我们的npm包，并且打印一下看看生效了没有。如何启动呢？我们用webpack进行打包，来看看效果。

我们在根目录下面创建一个webpack.config.js

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

然后我们执行webpack命令：

我们可以看到打包生成了一个dist文件夹以及其下的bundle.js：

在dist下创建一个index.html，引用这个bundle.js看下打印出来了什么：

dist/index.html

<!DOCTYPE html>
<html>

<head>
  <title>验证</title>
</head>

<body>

  <script src="./bundle.js"></script>
</body>

</html>

看下打印：

至此，我们的npm发布流程都已经做完了。

结语

npm给我们的日常开发带来了很大的便利，了解npm发布流程对于一个前端来说还是非常有必要的，希望这篇文章能给不了解npm发布流程的小伙伴一些帮助。

如果看完这篇文章，对您有所帮助的话，还烦请您点个赞，点点关注，祝您生活愉快。