挑战21天手写前端框架 day2 环境准备和技能要求

聪小陈
1,924 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

这个内容感觉有些重复了，但是看大纲里面是有这些内容的，想着读者能够，跟着这个系列，一步一步的实践，所以还是写了这么一篇。如果你有前端开发环境，和有 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：

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

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

$ 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: 都不选，因为我们需要一个全新的全空白的仓库。

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

malitainit.jpg

页面上会显示新建项目的命令，对于 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，那就是这是一个别人的私有包，你就需要换一个名字，或者使用组织名下包。

总结

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

avatar
文章
阅读
粉丝