这个内容感觉有些重复了，但是看大纲里面是有这些内容的，想着读者能够，跟着这个系列，一步一步的实践，所以还是写了这么一篇。如果你有前端开发环境，和有 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，那就是这是一个别人的私有包，你就需要换一个名字，或者使用组织名下包。
总结
今天的内容就到这里了，感谢观看，如果你有什么疑问，可以通过评论和我互动。
