这个内容感觉有些重复了，但是看大纲里面是有这些内容的，想着读者能够，跟着这个系列，一步一步的实践，所以还是写了这么一篇。如果你有前端开发环境，和有 npm 发包经验，你可以跳过这篇内容。

环境配置

要进行现代前端开发，只需要电脑环境装有 Node & npm

当然你还需要一个开发 IDE，推荐使用 VS Code

终端

市面上有很多好用的终端软件，在这里我们使用内置终端。

• 对于 Windows， 使用 Command Prompt 或 PowerShell
• 对于 macOS，使用内置的终端应用程序 Terminal
• 
  

Node & npm

几乎所有用于现代 JavaScript 项目的工具都基于 Node.js。该下载页面已预构建的安装包适用于所有平台。我们建议选择 LTS 版本以确保最佳兼容性。

Node 捆绑安装了 npm，这是一个 JavaScript 的包管理器。

要验证安装成功，请打开一个新的终端窗口并运行：

$ node --version
$ npm --version
复制代码

在 macOS 上使用 npm 安装全局模块时，经常会遇到权限问题，如果你遇到了 EACCES 错误，请查阅解决权限错误。

注意，我现在用的node版本是 v16.13.1 ，如果你是跟着这个系列文章，step by step 的话，最好和我安装相同的 node 版本，因为这会减少很多预料之外的问题。

Git

因为我们会将仓库存放在 GitHub 上，所以我们会使用 Git 来提交和管理我们的项目。Git 是一个很高效流行的版本控制软件。

Git 通常伴随有 Git 主机，例如我们将使用的 GitHub，在这种情况下，需要进行其他设置。按照 Git 主机文档中的教程设置 Git：

• GitHub: Set up Git
• GitLab: Installing Git
• Bitbucket: Install Git
• 
  

否则，请遵循官方安装说明。可以从下载页面下载命令行实用程序。

要验证安装成功，请打开一个新的终端窗口并运行：

$ git --version
复制代码

Git GUI

Git 是一个命令行实用程序，但是有许多 GUI 客户端可用。使用 GitHub 的时候，推荐使用GitHub Desktop。其他 Git 主机，建议安装 Sourcetree。

使用 VS Code 可以安装 GitHub 插件 和 GitLens 插件

厂牌

取名字

首先为你自己的框架取一个好听易记的名字，比如我这里随便选了一个 malita，取小框架的意思，刚好包含了 alita 是巧合。（死不承认是趁机推广）

定下名字之后，可以通过 npm 上搜索一下是否已存在同名，可以直接访问 https://www.npmjs.com/package/你取得包名，如我取的是 malita。如果页面显示 404 那你大概率可以使用这个名字了，如果已经存在了同名的包，那你可以考虑换一个包名。如果你特别喜欢这个名字，那你可以在 npm 上面新建一个组织，如 alita，然后使用类似 @alita/malita 这样的包名。

新建 git 仓库

当然这一步并不是必须的，但是你最好还是使用 git 仓库来管理你的开发进度，至少有一个好处，你能看到你本次修改都改了哪些文件，当你遇到“为什么一直跑的好好的，突然就不行了”之类的疑问时，你就可以把你的代码恢复到它可以正确运行的时间节点上。

首先我们在 GitHub 上新建一个项目，组织和是否公开你可以自由选择，Repository name 填你上面取的名字就好。下方的 Initialize this repository with: 都不选，因为我们需要一个全新的全空白的仓库。

点击新建按钮，你就会进入项目管理页面

页面上会显示新建项目的命令，对于 git 命令不熟悉的朋友，非常的友好。

将仓库同步到本地

在你的工作目录下，执行 git clone you-git-url ，如 git clone https://github.com/xiaohuoni/malita.git，将会新建一个文件夹，文件夹名称为你上面取的包名，如 malita 然后用 VS Code 打开这个空文件夹。打开 VS Code 的终端（点击 任务栏中的终端 - 新建终端）。

发布自己的 npm 包

初始化 npm 包

执行 npm init -y， -y 的意思是接下来 npm cli 问我们的所有问题，我们都回答 yes 就是全使用默认。

➜  malita git:(master) npm init -y
Wrote to /Users/congxiaochen/Documents/malita/package.json:
{
  "name": "malita",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xiaohuoni/malita.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/xiaohuoni/malita/issues"
  },
  "homepage": "https://github.com/xiaohuoni/malita#readme"
}
复制代码

先建 git 在 npm init 有个好处，会自动生成 repository 信息，这样别人在使用你的包的时候，遇到问题，可以找到你仓库所在的地址。

上面的信息，修改你想修改的内容，比如 version、keywords 和 author 。这里我将版本号改成了 0.0.1。

然后执行 npm login 根据提示登录，然后执行 npm publish 将你的包推送到 npm 上。

➜  malita git:(master) ✗ npm publish 
npm notice 
npm notice 📦  malita@0.0.1
npm notice === Tarball Contents === 
npm notice 504B package.json
npm notice === Tarball Details === 
npm notice name:          malita                                  
npm notice version:       0.0.1                                   
npm notice filename:      malita-0.0.1.tgz                        
npm notice package size:  335 B                                   
npm notice unpacked size: 504 B                                   
npm notice shasum:        dbc8d0364b3c412eb611622615a301c008bddb98
npm notice integrity:     sha512-ves43De3fF12v[...]hm7yv+IGRy1Uw==
npm notice total files:   1                                       
npm notice 
+ malita@0.0.1
复制代码

恭喜你，在 npm 上发布了自己的一个包，你可以通过分享给其他的朋友来共享你的工作成果。

需要注意的是，如果你是使用组织名下包的方式，那在 npm publish (npm 发包命令，不知道没关系，接下来会提到)的时候，需要在包路径的 package.json 中增加 "publishConfig": { "access": "public" }, 配置。

如果你在 npm publish 的时候，提示你 403 权限相关问题。有两种情况，一种是你网络状态不佳，虽然提示 403 但是其实推送成功了，你可以通过访问页面 https://www.npmjs.com/package/malita 确认，如果还是显示 404，那就是这是一个别人的私有包，你就需要换一个名字，或者使用组织名下包。

总结

今天的内容就到这里了，感谢观看，如果你有什么疑问，可以通过评论和我互动。