前端学习:从零开始做一个前端开源项目

1、开源包含的内容

  • 源码。
  • 文档。如二次开发文档和用户使用文档
  • 开发环境。告诉二次开发者如何搭建和运行代码
  • 允许他人贡献代码。而不是仅仅给别人阅读源码的权限
  • 问题。用户提问,维护者答复,问题共享
  • 问题列表和升级计划。记录当前问题,以及何时解决、何时升级

2、注册账号

根据自己的需求决定注册的账号是基于组织 的还是项目的。

注册账号需要分别去githubnpm注册以XXX为用户名的账号。

3、创建项目

  • 注册完成后点击【+】进行创建New repository,操作如下图。
  • 在Repository name栏目填写项目名称。如出现绿色则说明项目名称可

  • 在Description栏目填写针对项目的一个描述,以展现项目特点。

  • 选择Public即可。README file是创建项目后的一个开发文档,可以勾选。license选择MIT License(开放协议)即可。之后就可以创建项目了。注意:这里Add .gitignore这里应该选择Node,不然到时候创建没有.gitignore文件。
  • 接下来就可以通过链接去访问项目了。

例如:[Renascence33/fast-cache: 短小精悍的前端缓存工具,防止内存"侧漏" (github.com)](https://github.com/Renascence33/fast-cache "Renascence33/fast-cache: 短小精悍的前端缓存工具,防止内存"侧漏" (github.com)")

4、clone项目

  • 首先要在Setting里添加ssh key

ssh key是链接我的电脑和GitHub服务器的一把钥匙,只有添加成功了才能把我本地的代码提交到GitHub服务器里。

  • 添加成功后我们就可以到项目页面用SSH来clone项目。
  • 复制链接后,进入Git Bash命令窗口,输入克隆命令

git clonegit@github.com:Renascence33/fast-cache.git

  • 下载完毕,进入代码目录,运行如下命令修改当前git的用户名和邮箱,改成和当前GitHub用户名和注册邮箱一致。
  • cd fast-cache
  • git config user.name 'Renascence33'
  • git config user.emal 'fast-cache@github.com'
  • 最后,随便修改一下README.md文件的内容,然后提交,看能否成功?成功了就说明添加的ssh key生效了。
  • git add .
  • git commit -m "first update"
  • git push origin main
  • git status可以查看README是否修改,git diff可以查看修改的内容
  • push成功后可以在主页看到推送后的内容。

5、搭建开发环境

  • 初始化一个环境,命令行运行npm init,然后按照提示初始化即可,最后通过ll命令来检验是否生成了package.json文件。

npm init

5.1 规范一级目录

项目的一级目录要提前规范好。用mkdir命令创建文件夹。

  • src -- 源代码
  • release -- 发布结果
  • test -- 单元测试用例
  • doc --文档
  • example -- 示例

5.2 创建工具并运行程序

安装插件。

npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev

安装完之后创建.babelrc文件和webpack.config.js文件。

.babelrc文件内容如图:

webpack.config.js文件内容如图:

最后,修改 package.json中的scripts,增加"release":"webpack"。


然后命令行运行 npm run release,就可生成release 的内容。

但是在这一步中,我出现了错误,一定要注意版本问题,否则会报错!!!

注意:git clone 所下载文件的存放位置

先cd 到自己想存放下载文件的地址,然后再进行git clone

5.3 规范git分支

至少要存在两个分支,master和dev,dev是开发中的代码。

5.4 完善 README.md

必须包括以下内容:

  1. 产品简介(突出特点,打差异化竞争)
  2. 产品安装和下载
  3. 快速使用(详细的使用文档或者二次开发文档,外链即可)
  4. 交流提问区
  5. 关于作者(放自己的博客链接等)

6、git常用命令

初始化仓库:使用 git init 命令在本地目录中创建一个新的 Git 仓库。

添加文件:使用 git add 命令将文件添加到暂存区。

提交变化:使用 git commit -m "message" 命令将暂存区的变化提交到仓库中,并附上一条描述信息。

查看状态:使用 git status 命令查看当前仓库的状态,包括修改的文件和未提交的变化。

查看历史:使用 git log 命令查看提交的历史记录,包括提交者、时间和描述信息。

创建分支:使用 git branch 命令创建一个新的分支。

切换分支:使用 git checkout 命令切换到指定的分支。

合并分支:使用 git merge 命令将指定分支的变化合并到当前分支。

拉取和推送:使用 git pull 命令从远程仓库获取变化并合并到本地仓库,使用 git push 命令将本地仓库的变化推送到远程仓库。

克隆仓库:使用 git clone 命令克隆远程仓库到本地。

7、提交第一个版本

  • 运行命令 git tag -a 'v0.0.1' -m "第一版本" 和命令git push origin v0.0.1

然后在github的release可以看到提交的第一个版本。

  • 最后需要提交到npm上,运行 npm add user 和 npm login来登陆。然后在项目的根目录运行npm publish .

8、升级版本

  • 运行命令 git checkout -b dev 创建另一个分支

  • 在index.js文件中加一个功能

    clear(){

    this.list = {}

    }

  • 在json文件里把版本verson改成0.0.2

  • 修改代码、文档和测试用例等,然后自测

  • 将dev分支提交到远程

  • 然后可以在GitHub上看到两个分支
  • 然后合并分支main和dev
  • 跟之前的步骤一样,更新到release
相关推荐
张铁铁是个小胖子3 小时前
微服务学习
java·学习·微服务
AITIME论道4 小时前
论文解读 | EMNLP2024 一种用于大语言模型版本更新的学习率路径切换训练范式
人工智能·深度学习·学习·机器学习·语言模型
m0_748255264 小时前
前端安全——敏感信息泄露
前端·安全
鑫~阳6 小时前
html + css 淘宝网实战
前端·css·html
Catherinemin6 小时前
CSS|14 z-index
前端·css
是小崔啊6 小时前
开源轮子 - EasyExcel02(深入实践)
java·开源·excel
青春男大7 小时前
java栈--数据结构
java·开发语言·数据结构·学习·eclipse
2401_882727578 小时前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder8 小时前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂8 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js