目录

github开源的流程-慕课网教程学习笔记

github开源的流程-慕课网教程学习笔记

慕课教程视频网址:

技术栈:

已经安装npm和node

webpack的基础

了解 html javascipt css 和 nodejs 基础知识。

了解 git 常用操作。

第一章:什么是开源

开源并不是仅仅贡献一份实现某种功能的代码,而是还是要包含以下东西:

https://i-blog.csdnimg.cn/blog_migrate/1d0f305a27a8c5621294d296bdd8d255.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/534c80394194537809edf70eef0af52a.png#pic_center

第二章:做什么?

很多开源项目的产生是由于日常工作生活中有某个需求了,但是并没有对应的开源项目,于是就开始做出来,并把它开源了。

想要做开源项目,你就得有一个预先的期望,然后再去想做什么?

一来要能快速做出第一版,然后慢慢迭代。

二来要方便地进行推广,最好零成本使用。

https://i-blog.csdnimg.cn/blog_migrate/db20edba18ef49175393105db3aafcdb.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/09f0c4d41844390a221b12c8c94d88dd.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/f075c0e285b7457f530fd27647fd89a8.png#pic_center

这是一个缓存工具,整合localStorage,以及合理地内粗销毁机制。

第三章:在github上创建一个项目

第一步:github上项目地创建:

https://i-blog.csdnimg.cn/blog_migrate/f773d1de30c8422113936e277e1ee6ba.png#pic_center

创建好了就进入了项目主页:

https://i-blog.csdnimg.cn/blog_migrate/fe013dd1ac11ad3817b8251a232bcaad.png#pic_center

第二步,是添加ssh key

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

这里我还不懂https和ssh克隆的区别,查了一下:

git中clone项目有两种方式HTTPS和SSH,它们的区别如下:
HTTPS:不管是谁,拿到url随便clone,但是在push的时候需要验证用户名和密码
SSHclone的项目你必须是拥有者或者管理员,而且需要在clone前添加SSH KeySSH push的时候,是不需要输入用户名的,如果配置SSH key的时候设置了密码,则需要输入密码的,否则直接是不需要输入密码的。
git中使用SSH Key的步骤
检查电脑是否存在SSH Key:$ cd ~/.ssh$ ls
如果存在id_rsa.pub  id_dsa.pub 文件,说明文件以及存在,跳过创建SSH Key步骤
创建SSH Key
将公共的SSH 放到远程仓库上

这里采用ssh的方法吧!

https://i-blog.csdnimg.cn/blog_migrate/2ff30039f1cdf057d95291814d818712.png#pic_center

因为我还是前端小萌新,当然得有小萌新的亚子!我用windows!!

这篇博客就讲了生成ssh key的流程:

然后我就装好啦!

第三步:拷贝项目到自己的电脑上

https://i-blog.csdnimg.cn/blog_migrate/6ff4e7871a462ab8796cd2e36bb86ad3.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/d905dc7f1d443cb9b60acb31419d813d.png#pic_center

这样之后我桌面就多了这个项目的文件夹:

https://i-blog.csdnimg.cn/blog_migrate/67e3c4007a545dff9ee7cf466df772f6.png#pic_center

进入这个文件夹,修改当前git的用户名和邮箱:

git config user.name 'fast-cache'
git config user.email 'fast-cache@gmail.com'

https://i-blog.csdnimg.cn/blog_migrate/7aa73a07f69039cf6add7a1cc76a6041.png#pic_center

第四步:验证下ssh是否添加成功

随便修改下readme的内容,打开代码,修改下:

https://i-blog.csdnimg.cn/blog_migrate/cd4947446a9b516150d0b99e313bc9de.png#pic_center

打开Git查询状态:

https://i-blog.csdnimg.cn/blog_migrate/9c1a756224cf9551921300038afc3984.png#pic_center

查看下未暂存的修改:

https://i-blog.csdnimg.cn/blog_migrate/899e6ba718d42aabe29e9680f4ae9e74.png#pic_center

将修改添加到缓存区,并提交修改:

https://i-blog.csdnimg.cn/blog_migrate/7dbc93de34416421d65508d3cca8c494.png#pic_center

将变更的代码提交到远程仓库:

https://i-blog.csdnimg.cn/blog_migrate/8299ae025c8f944b682e504b6558d459.png#pic_center

然后刷新github上的项目:

https://i-blog.csdnimg.cn/blog_migrate/3eb7a2dd069be89c73e46b3dea044e5d.png#pic_center

说明已经提交成功了,说明可以正常的下载和提交 项目,后续的工作可以正常进行了!

第四章:初始化项目的开发环境

这里需要提前安装好npm和node,我之前就装好了。

https://i-blog.csdnimg.cn/blog_migrate/d642f2cb11b3a4cd6884d6e3ba272edf.png#pic_center

第一步:初始化一个环境:npm init

https://i-blog.csdnimg.cn/blog_migrate/a4d2395c695f922646250a972e7e532c.png#pic_center

这样的话,目录下就会多出一个名为package.json的文件:

https://i-blog.csdnimg.cn/blog_migrate/73e0252afbcd0d3d6b53267b8752f75c.png#pic_center

值得注意的是这里的版本号,我定义为0.0.1,是因为版本号分三级:

https://i-blog.csdnimg.cn/blog_migrate/bb5961223042236716a91c14f496f1f4.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/e0586f55a2b3e56c97a1347c60504085.png#pic_center

第二步:规范一级目录

https://i-blog.csdnimg.cn/blog_migrate/ca344247733eef6db44d5a12b9892a0c.png#pic_center

创建这几个文件夹:

https://i-blog.csdnimg.cn/blog_migrate/810933c1db65eadaf7eae1ca3c1b5ee1.png#pic_center

第三步:创建入口文件:index.js(先前初始化设置好了,但是未创建)

https://i-blog.csdnimg.cn/blog_migrate/52701013bb8d4abacc176ec880889164.png#pic_center

第四步:构建工具,这里用webpack。

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

安装完成之后会多出这些东西:

https://i-blog.csdnimg.cn/blog_migrate/4cd74ddb150bda02b532781ae9901c2a.png#pic_center

(注意,这里的两个babel版本会冲突,解决办法 )

第五步:在fast-cache(项目根目录)下创建.babellrc文件

这是babel的配置文件

https://i-blog.csdnimg.cn/blog_migrate/f9af63a0986b392244ec2eaac56412ef.png#pic_center

第六步:在fast-cache(项目根目录)下创建webpack.config.js文件

webpack配置内容如下:


module.exports={
	entry:'./src/index.js',
	output:{
		path:__dirname,
		filename:'./release/bundle.js'
	},
	module:{
		rules:[{
				test:/js?$/,
				exclude:/(node_modules)/,
				loader:'babel-loader'
			}]
	}
}

第七步:设置打包的脚本命令行

https://i-blog.csdnimg.cn/blog_migrate/e34eaa36d8eed5949d77c400ab8baaf7.png#pic_center

这样直接命令行:npm run release就可以用webpack进行打包。打包后生成项目文件:

https://i-blog.csdnimg.cn/blog_migrate/46aa4da03569d5ff686a44be54cf9e60.png#pic_center

但是这个代码打包出来,我们需要测试一下是否成功。

第八步:测试

安装这个浏览器工具:

npm install http-server -g

然后再在package.json中加一行:

https://i-blog.csdnimg.cn/blog_migrate/1464f321dcbfd5fdb724b42d53c3cf07.png#pic_center

 npm run example

https://i-blog.csdnimg.cn/blog_migrate/8124c5acb99442a8d8889cbff4f8cc62.png#pic_center

再在浏览器输入地址就可以啦:

https://i-blog.csdnimg.cn/blog_migrate/fe690781dc39d327cdf4f44a670557b0.png#pic_center

这就说明我们原代码,到打包出来的代码,已经跑通了!

第九步:规范git分支

https://i-blog.csdnimg.cn/blog_migrate/44974eb280862fc80ad0ce0c7937f78b.png#pic_center

可以看到,现在只有主分支master.

https://i-blog.csdnimg.cn/blog_migrate/fdac5af707c060b6d2d98b522d158754.png#pic_center

第十步:完善readme

https://i-blog.csdnimg.cn/blog_migrate/505267055c00a07568dbe82174a9be28.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/43b60d4a6099490e9393a7761f5c0266.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/04740f46fccc242090a0809c4315bae2.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/dd0ca11c45db2a923ced2a0cce28d78e.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/fc1916aa769693ea72e13c1cb2ba7bb9.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/3d8ad10129a78bbcf845016739eb04fa.png#pic_center

这样,就完成了初始的配置:

https://i-blog.csdnimg.cn/blog_migrate/5d544cb6fde98761e7f5a5cd60861262.png#pic_center

第五章:提交代码

第一步:开源项目主体代码的书写

假设此时我们的代码已经书写完毕:

https://i-blog.csdnimg.cn/blog_migrate/391833ea4ddfdb9133028459908a1b5e.png#pic_center

测试用例:

https://i-blog.csdnimg.cn/blog_migrate/75795c5d9abf77a0f33fa073bb78d832.png#pic_center

再用npm run release发布一下,npm run example运行。

第二步:书写文档和测试用例

这里主要讲文档的书写:

这里需要先全局安装一个文档的工具,它能够帮助程序员快速地创建文档,并发布成html格式。

安装地命令行:npm i gitbook-cli -g

https://i-blog.csdnimg.cn/blog_migrate/46cb00ad4e6fd4968cbff458d8017370.png#pic_center

然后在根目录下创建SUMMARY.md,内容如下:

https://i-blog.csdnimg.cn/blog_migrate/4acacbde9e451ecf765cec1fb8686e41.png#pic_center

# Summary

* [Introduction](README.md)
* [使用文档](doc/use/README.md)
	* [使用1](doc/use/use1.md)
	* [使用2](doc/use/use2.md)
* [二次开发](doc/dev/README.md)
  *  [开发2](doc/dev/dev1.md)
  * [开发2](doc/dev/dev2.md)

然后命令行执行gitbook init

https://i-blog.csdnimg.cn/blog_migrate/bc21b4d75d58307a71b54fc83a7bfb76.png#pic_center

在doc下,就出现了这些文件:

https://i-blog.csdnimg.cn/blog_migrate/ee0cf6cad001e69c830e9339c76e0ca3.png#pic_center

接下来开始完善开发文档:

https://i-blog.csdnimg.cn/blog_migrate/64b512d341c413d0e2deb5d83928ab18.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/6143e056a736bbf393e1eb1cc28c13b0.png#pic_center

文件已经构建好了,这时候,就可以把它们加到根目录下的readme中去:

https://i-blog.csdnimg.cn/blog_migrate/853a16f6ec2761c6dc65aec20bfc5941.png#pic_center

现在要把着文档变成html的格式,让用户更方便阅读:gitbook build

https://i-blog.csdnimg.cn/blog_migrate/6756607ae33d1bbb0edce81f6448e54a.png#pic_center

在项目的根目录下,就会把根目录下的文件处理成Html格式:生成的文件放在_book文件夹下:

https://i-blog.csdnimg.cn/blog_migrate/7503be1ab7f7eda5598b6ac24911c5b8.png#pic_center

然后运行代码npm run example,浏览器打开对应地址:

https://i-blog.csdnimg.cn/blog_migrate/61188ca62ef4a5b375f612103a0b4a7a.png#pic_center

但是又因为这个_book是不提交的,所以在gitignore里面要加上这个:

https://i-blog.csdnimg.cn/blog_migrate/0d25750dd879912d28e081663e342e04.png#pic_center

这样之后,git就忽略了它,检查不到了,

https://i-blog.csdnimg.cn/blog_migrate/5be9f03950f4c8c64eab863811d7cf7e.png#pic_center

第三步:提交第一版的代码

git add ./
git commit -m "v0.0.1 初次提交"
git push origin master

设置tag:

git tag -a 'v0.0.1' -m "第一版本"
git push origin  v0.0.1

这样之后:tag里面就多出一个了:

https://i-blog.csdnimg.cn/blog_migrate/153da309ca777d10b955a7474a0ef0ea.png#pic_center

点击进去:

就可以下载这个版本的所有代码了!

接着将这个地址放到readme.md上:

https://i-blog.csdnimg.cn/blog_migrate/cb72ee724e5d67bfe55a1f2b41460c16.png#pic_center

第四步:提交到npm上,让用户可以通过npm install安装

https://i-blog.csdnimg.cn/blog_migrate/f642fb659c24e814c9ce6f659860d801.png#pic_center

 npm add user
 npm login
 然后填写你的npm账号和密码以及注册邮箱

接下来发布,因为这个fast-cache-npm已经被发布过了。所以package.json里面的名字更改下:

我改成:fast-cachee-npm,再发布:

https://i-blog.csdnimg.cn/blog_migrate/db99a58edb2a64f3aa62bae3e5ebd2bc.png#pic_center

npm publish .

https://i-blog.csdnimg.cn/blog_migrate/6575288949a3817a332baf98ffb43f8c.png#pic_center

这样一来,你的npm上就会多出一个来:

https://i-blog.csdnimg.cn/blog_migrate/408a55170054b33b5fedfdac215dac5f.png#pic_center

点进去:用户就可以直接在命令行安装这个包!

https://i-blog.csdnimg.cn/blog_migrate/141c0fc9b03baed46636aca8488dbdd8.png#pic_center

于是readme.md可以继续更新信息:

https://i-blog.csdnimg.cn/blog_migrate/f70eed20700e63c3eca764f96db418a9.png#pic_center

这样,初步提交代码,发布的流程就结束了!

第六章,版本迭代

第一步,创建新的分支

创建开发的dev分支,并指向这个新分支:

git checkout -b dev

https://i-blog.csdnimg.cn/blog_migrate/6e15f02c58a3670cbf5d101417409ddb.png#pic_center

第二步:修改代码

https://i-blog.csdnimg.cn/blog_migrate/bb467ca20cf66337dcfbe29815f8ca75.png#pic_center

假设,这就是修改后的代码。

然后再在package.json里面把版本升一级:

https://i-blog.csdnimg.cn/blog_migrate/4c9797a138277aa002d87e6cdc37fdf5.png#pic_center

再接着修改对应的文档和测试用例

自测一下代码是否可行。

第三步:将dev分支切换到远程

 git add ./
 git commit -m "v0.0.2"
 git push origin dev

github上就出现了两个分支:

https://i-blog.csdnimg.cn/blog_migrate/472e5c6821ea368d364007fefb5894a5.png#pic_center

第四步:将dev合并到master,并提交master到远程

 git checkout master  //将指针指向主分支
 git merge dev  //将dev合并到master
  git push origin master//master到远程
 

第五步:创建tag ,提交到远程

git tag -a v0.0.2 -m "v0.0.2"
git push origin v0.0.2

https://i-blog.csdnimg.cn/blog_migrate/f5963ea5581a20f113687db2ddf70866.png#pic_center

第六步:发布到npm

npm publish .

https://i-blog.csdnimg.cn/blog_migrate/2140ae67456a4d1838fdfb5ee42a52e6.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/26bd7fce93e53a7c171f149ba3c1bb71.png#pic_center

第七章,利用github pages创建官网

第一步:创建gitpages项目

https://i-blog.csdnimg.cn/blog_migrate/0cf9559f62247f03cfe20b1e346db9a8.png#pic_center

具体的教程在这里:

https://i-blog.csdnimg.cn/blog_migrate/469f0273fb1935994f07fc65061b6990.png#pic_center

进入这个目录:里面有一个readme:

https://i-blog.csdnimg.cn/blog_migrate/fa36323f6f16d20429f0f5ea227cbcf9.png#pic_center

然后打开这个项目:

新建index.html文件,随便写点东西:

https://i-blog.csdnimg.cn/blog_migrate/d534d13ca8ca2ff181cf317e4ef3e95e.png#pic_center

提交到远程:

https://i-blog.csdnimg.cn/blog_migrate/1b9169703e9185fa95f5be2eb2e62bce.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/fc85c727c5aed36715ac3ceee2f1f3fc.png#pic_center

于是就可以直接访问了:

https://i-blog.csdnimg.cn/blog_migrate/714dbce24c745f728faad331f9a3f306.png#pic_center

第二步:生成项目的官网

先将之前更改的文档使用gitbook build更新一下

https://i-blog.csdnimg.cn/blog_migrate/8b6f07dd09e6e0a37e5b1f95a39bf27c.png#pic_center

然后把生成的_book下的东西拷贝到官网的目录下:

https://i-blog.csdnimg.cn/blog_migrate/41521867916a44f5b5cf174cd17b5094.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/59a6f08e95b8ba30dcb9de6eaf71bd95.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/4138eeed86e4e481f725486fdf118e88.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/59d546d7e2d4dbe562f734683d5051e0.png#pic_center

这样的话,这个官网就出来了:

https://i-blog.csdnimg.cn/blog_migrate/373bad8f9e26480efa61bc7b63a090c3.png#pic_center