慕課網--》從零作一個前端開源項目筆記

時間 2020-05-06

標籤一個前端開源項目筆記简体版

原文原文鏈接

工做中時經常使用到github，可是一直對github項目不甚理解，無心間在慕課網上看到雙越老師的「從零作一個前端開源項目」後，在第一遍快速學習老師的課程後，手把手實際操做了一把，感受受益不淺。html

總結一下平時的收穫，達到溫故而知新的效果。前端

1：老師的教學文檔：https://www.imooc.com/article/28240node

2：學習目的：webpack

　　由於我對前端接觸的很少，這裏主要時想了解github項目庫的相關用法。git

　　根據文檔以及本身的實踐，記錄相應的知識點。github

3：相關概念：web

　　github：一個面向開源及私有軟件項目的託管平臺，能夠把項目託管在github上，通常源碼公佈。npm

　　npm：是 JavaScript 世界的包管理工具，能夠經過npm -i 包名稱下載到相關的庫直接使用，例如本文使用的npm -i gitbook -g (g是全局安裝生效的意思)
json

　　本身總結的本文的目的：在npm中管理一個前端開源庫。vim

　　練習總結：

　　　　第一次接觸這麼多的東西，不少內容對我來講都是新的，總結下該練習流程：

　　　　　　1：開發項目：以項目名稱註冊github帳號，設置基礎目錄，並在本地修改幫助文檔以及相關代碼，作提交。（省去web項目用到的工具流程）。

　　　　　　 .gitignore文件能夠屏蔽相關的git提交（web相應的框架工具及npm 的使用省去）

　　　　　　2：md文檔轉html文檔能夠用到npm下的gitbook工具，有效的生成說明文檔。（每一次修改後都要從新生成）

　　　　　　3：提交代碼後，能夠用git tag命令實現發佈版本，在項目代碼中的release欄能夠看到版本包等信息。

　　　　　　4：前端js項目：用npm init自動生成package.json。在nmp中配置與github項目帳號同樣名稱的用戶，能夠用npm去管理髮布的js包，供你們使用。

　　　　　　　同時npm提供了一個CDN的路徑能夠自動更新版本。

　　　　　　5：官網，github提供了一種免費的官網機制，用github帳號+github.io新建一個git庫，在裏面配置上原庫中gitbook生成的html文檔可當作一個官網對項目進行認識。

　　　　　　直接訪問github帳號+github.io，在網頁中便可顯示該庫下對應根目錄index.html對應的內容。

4：操做流程：

　　4.1：註冊github帳號，建立github項目：(通常我的項目，組織能夠理解爲軟件集)：

　　　　注意：github帳號註冊要慎重，與項目強相關，不宜修改。

　　　　提示：這裏由於我已經有過github帳號，本身並無好的和可作的開源項目，因此，拿來之前隨意註冊的帳號作練習測試。

　　　　4.1.1：打開本身的github我的主頁，新建項目：

提示：

　　　　　　1：決定好的項目名稱要慎重；

　　　　　　2：選擇public類型；

　　　　　　3：初始化的時候建立README.md文件；

　　　　　　4：選擇建立一個.gitignore文件（git忽略提交內容配置文件）。

　　　　　　5：選擇MIT許可證(最普遍的)

　　　　4.1.2：效果展現：

　　4.2：本地配置git而且克隆代碼到本地+第一次提交測試：

　　　　4.2.1：配置本地環境（經過ssh祕鑰使本地有提交代碼的權限）：

　　　　　　　　執行ssh-keygen命令生成對應的祕鑰，一直回車點擊默認便可。

　　　　　　　　按照提示的默認路徑，取/.ssh/id_rsa.pub 中的內容，拷貝出來。

　　　　　　　　打開我的github項目主頁：https://github.com/settings/keys 選擇「SSH and GPG keys」,添加本地祕鑰到github：

/.ssh/id_rsa.pub
做者：
連接：https://www.imooc.com/article/28240
來源：慕課網
本文原創發佈於慕課網，轉載請註明出處，

ssh-keygen
做者：
連接：https://www.imooc.com/article/28240
來源：慕課網
本文原創發佈於慕課網，轉載請註明出處，

ssh-keygen
做者：
連接：https://www.imooc.com/article/28240
來源：慕課網
本文原創發佈於慕課網，轉載請註明出處，謝謝合做

　　　　4.2.2：克隆github庫代碼：

　　　　　　　 1:複製github上建立的項目庫路徑（注意這裏有https和ssh兩種方式）：

　　　　　　　　選擇ssh方式獲取git路徑，https的方式獲取git庫路徑在git push時每次都要從新輸入用戶名和密碼）：

　　　　　　　　ssh的方式項目路徑以Git開頭。

　　　　　　　　2:執行git clone命令克隆github遠端庫：　　　

➜  github_code git clone git@github.com:HLPJay/catch_imooc2.git Cloning into 'catch_imooc2'... remote: Counting objects: 5, done. remote: Compressing objects: 100% (5/5), done. remote: Total 5 (delta 0), reused 0 (delta 0), pack-reused 0 Receiving objects: 100% (5/5), done.
➜  github_code cd catch_imooc2
➜  catch_imooc2 git:(master) la
total 16K
drwxr-xr-x 8 hlp hlp 4.0K 7月  22 15:17 .git
-rw-r--r-- 1 hlp hlp  270 7月  22 15:15 .gitignore
-rw-r--r-- 1 hlp hlp 1.1K 7月  22 15:15 LICENSE
-rw-r--r-- 1 hlp hlp   64 7月  22 15:15 README.md

　　　　4.2.3：配置帳號和密碼並作第一個提交測試：

➜  catch_imooc2 git:(master) git config user.name "XXXXXX" ➜ catch_imooc2 git:(master) git config user.email "XXXXXXXXX@163.com" ➜ catch_imooc2 git:(master) vim README.md ➜ catch_imooc2 git:(master) ✗ git status On branch master Your branch is up to date with 'origin/master'. Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: README.md no changes added to commit (use "git add" and/or "git commit -a") ➜ catch_imooc2 git:(master) ✗ git add . ➜ catch_imooc2 git:(master) ✗ git commit -m "first update" [master 99f4ee3] first update 1 file changed, 3 insertions(+)

➜  catch_imooc2 git:(master) git push origin master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 361 bytes | 361.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:HLPJay/catch_imooc2.git
   843684a..99f4ee3  master -> master

　　4.3：經過npm去使代碼框架生效（感受npm這裏特別神奇，這是我想整理的重點）：

　　　　 1：安裝npm和node

　　　 2：執行npm init 按照提示填寫相關信息。

➜ catch_imooc2 git:(master) npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (catch_imooc2) version: (1.0.0) 0.0.1 description: 項目描述 entry point: (index.js) src/index.js test command: git repository: (https://github.com/HLPJay/catch_imooc2.git) 
keywords: catch_imooc2 author: https://github.com/HLPJay
license: (ISC) MIT

　　　　3：執行完npm Init 後，在項目根目錄下生成的package.json(請仔細瞭解生成的代碼，以及代碼架構)

　　　　（版本號，一級：重構版本；二級：重大功能改進；三級：小升級或者bug修復）

　　　　 4：建立目錄：

　　　　　　根目錄文件夾通常：

　　　　　　　　 src/ 源代碼；

　　　　　　　　　 release/ 發佈結果

　　　　　　　　 test/ 單元測試；

　　　　　　　　　 doc/ 文檔

　　　　　　　　　　 example/ 實例

➜ catch_imooc2 git:(master) ✗ mkdir doc src release example test ➜ catch_imooc2 git:(master) ✗ ls doc example LICENSE package.json README.md release src test

　　　　5：根據package中的配置，還須要在src目錄下新建index.js(只加入一行簡單測試)

➜  catch_imooc2 git:(master) ✗ cat src/index.js alert('catch_imooc2');

　　　　6：經過構建工具去自動生成框架代碼，最經常使用的是webpack。

　　　　（--registry=https://registry.npm.taobao.org 是登陸https://npm.taobao.org/中獲取到的地址）

➜  catch_imooc2 git:(master) ✗  npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org

　　　　7：新建配置文件：

➜ catch_imooc2 git:(master) ✗ cat .babelrc { "presets": ["es2015", "latest"], "plugins": [] }% 
➜ catch_imooc2 git:(master) ✗ cat webpack.config.js ----》配置經過src下的代碼生成release的代碼 module.exports = { entry: './src/index.js', output: { path: __dirname, filename: './release/bundle.js' }, module: { rules: [{ test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader' }] } }

　　　　8：修改package.json文件，在script標籤中加上："release":"webpack"

　　　　　　執行npm run release 生成目標代碼。

➜ catch_imooc2 git:(master) ✗ npm run release > catch_imooc2@0.0.1 release /home/hlp/code/github_code/catch_imooc2 > webpack Hash: c94073cbf2daa162c3ca Version: webpack 4.16.1 Time: 3344ms Built at: 07/22/2018 4:21:35 PM Asset Size Chunks Chunk Names ./release/bundle.js  966 bytes       0 [emitted] main Entrypoint main = ./release/bundle.js [0] ./src/index.js 37 bytes {0} [built] WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
➜ catch_imooc2 git:(master) ✗ ls release ------》生成目標文件，源代碼輸出成編譯後的代碼。 bundle.js

　　　　9:在example目錄下新增一個html頁面作測試，加載release/bundle.js（其實是src/index.js生成的二進制文件）查看效果。

➜ catch_imooc2 git:(master) ✗ cat example/index.html <!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>example</title> 
</head> 
<body> 
    <p>example _test_imooc2</p> 
    <script src="../release/bundle.js"></script> 
</body> 
</html>%

　　　　10：安裝一個http-server的小工具，發佈網頁（靜態網頁）。

➜  catch_imooc2 git:(master) ✗ npm install http-server -g

　　　　11：修改package.json文件，在script標籤中加上："example":"http-server -p 8880"

　　　　　　執行npm run example發佈該靜態網頁。

➜ catch_imooc2 git:(master) ✗ npm run example > catch_imooc2@0.0.1 example /home/hlp/code/github_code/catch_imooc2 > http-server -p 8880 Starting up http-server, serving ./ Available on: http://127.0.0.1:8880
  http://192.168.1.103:8880
Hit CTRL-C to stop the server

　　　　12：在網頁輸入http://localhost:8880/example/index.html，查看驗證效果，是否正常加載src目錄下實現的js功能。

　　4.4：修改README.md規範項目說明+ 屏蔽（.gitignore文件中）不須要的提交的代碼並提交。

　　 README.md修改能夠參考以下：（注意#後有一個空格實現目錄大字體）

➜ catch_imooc2 git:(master) cat README.md # catch_imooc2 學習「從零搭建前端開源項目」測試 # 簡介 特點（推廣的一些亮點） 運行demo # 安裝下載 # 快速使用 簡單接入的文檔 - 使用文檔 - 二次開發文檔 # 交流&提問（能夠用issues） # 關於做者 -我的主頁 -收款二維碼%

　　　　　　屏蔽不須要提交的代碼並提交github遠程分支：

➜ catch_imooc2 git:(master) cat .gitignore #忽略 **/node_modules/* node_modules/*

➜ catch_imooc2 git:(master) ✗ git status  ---》注意不要提交多餘的代碼 ➜ catch_imooc2 git:(master) ✗ git add . ➜ catch_imooc2 git:(master) ✗ git commit -m "init project" ➜ catch_imooc2 git:(master) git push origin master

　　4.5：編碼規範：

　　　　要注意編碼規範，用相應的靜態檢查工具檢查一下。

　　4.6：文檔和測試用例（這裏是我能夠用到的）：

　　　　　測試用例和文檔均可以用相應的工具去實現，這裏只介紹了自動生成文檔的工具：

　　　　　用在項目目錄下用命令：「npm i gitbook-cli -g」安裝gitbook(經過md格式生成html文檔),並建立SUMMARY.md的文檔

安裝gitbook： ➜ catch_imooc2 git:(master) npm i gitbook-cli -g 新建SUMMARY.md文件： ➜ catch_imooc2 git:(master) ✗ cat SUMMARY.md # Summary * [項目介紹](README.md) * [使用文檔](doc/use/README.md) * [使用1](doc/use/use1.md) * [使用2](doc/use/use2.md) * [二次開發](doc/dev/README.md) * [開發1](doc/dev/dev1.md) * [開發2](doc/dev/dev2.md) 執行gitbook init生成對應的文檔： ➜ catch_imooc2 git:(master) ✗ gitbook init info: create doc/use/README.md info: create doc/use/use1.md info: create doc/use/use2.md info: create doc/dev/README.md info: create doc/dev/dev1.md info: create doc/dev/dev2.md info: create SUMMARY.md info: initialization is finished 

此時在doc目錄下已經自動生成相關的md文件，填寫本身的內容：
➜  catch_imooc2 git:(master) ✗ cat doc/dev/README.md
# 二次開發

- 下載：git clone git@github.com:HLPJay/catch_imooc2.git
- 編輯：src 目錄下編輯js文件
- 執行：npm run release 編譯
- 執行：npm run example 執行%     

執行gitbook build生成對應的html文件：
➜  catch_imooc2 git:(master) ✗ gitbook build
info: 7 plugins are installed 
info: 6 explicitly listed 
info: loading plugin "highlight"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK 
info: found 7 pages 
info: found 8 asset files 
info: >> generation finished with success in 4.3s ! 

運行服務器並驗證：
➜  catch_imooc2 git:(master) ✗ npm run example -----》其實是啓動服務"example":"http-server -p 8880"
登陸http://192.168.1.103:8880/_book/index.html查看生成的html文檔

　　4.7：製做版本代碼並提交：

　　　　　若是這裏的第一個版本代碼已經ok，則應該準備提交第一個版本了：

　　　　　1：註釋掉自動生成的_book目錄的提交（參考上文node_modules的註釋）。

　　　　 2：提交全部的代碼參考上文中的代碼提交（當前master分支代碼最新）；

　　　　　 3：提交第一個版本，就能夠獲取到版本下載路徑releases，能夠把該路徑加在介紹中，即爲項目穩定版本。

➜  catch_imooc2 git:(master) git tag -a "v0.0.1" -m "first project" ➜ catch_imooc2 git:(master) git push origin "v0.0.1"

　　　　　4：在github上查看提交後的版本包：點擊項目對應的releases，能夠查看到對應的版本，下載相應的code：

　　同步提交到npm中（package.json中 "name": "hlp7777",和npm的名字相同，最好時git的項目庫名稱）：--》我不是作前端的，這裏只是學習測試，原則上這裏應該和項目庫名稱相同。

　　　　 1：要註冊npm的帳號和密碼：（注意這裏要驗證郵箱）　　　　

　　　　 2：要在本地登陸npm：

➜  catch_imooc2 git:(master) ✗ npm add-user Username: hlp7777 Password: Email: (this IS public) XXXXXXXX@qq.com ➜ catch_imooc2 git:(master) ✗ npm login Username: hlp7777 Password: Email: (this IS public) XXXXXXXX@qq.com

　　　　 3：執行提交動做：

➜ catch_imooc2 git:(master) npm publish . + hlp7777@0.0.2

　　　　 4：即在npm本身的官網處就能夠看到本身提交過的版本包信息：

　　　　在上圖中能夠看到：

　　　　　　1：能夠經過npm i hlp777 下載該包到別人的庫裏去直接使用。

　　　　　　2：npm提供了CDN的服務，https://unpkg.com/hlp7777/release/bundle.js

　　　　　　　　https://unpkg.com/ CDN的地址

　　　　　　　　 hlp7777　　　　項目庫的名稱

　　　　　　　　 release/bundle.js　本身項目的路徑

　　　　　　　進入https://unpkg.com/hlp7777/release/bundle.js路徑，該路徑會自動刷新項目（npm項目這裏是hlp7777）包的版本，取最新。

　　4.8：升級版本：

　　　　　　升級的流程以下：　　　

1：建立新分支，合入修改的代碼：（修改內容！！！ 修改版本！！！ 自測！！！） ➜ catch_imooc2 git:(master) ✗ git checkout -b dev M README.md Switched to a new branch 'dev' ➜ catch_imooc2 git:(dev) ✗ git status On branch dev Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: README.md modified: doc/use/README.md modified: package.json no changes added to commit (use "git add" and/or "git commit -a") ➜ catch_imooc2 git:(dev) ✗ git diff ➜ catch_imooc2 git:(dev) ✗ git add . ➜ catch_imooc2 git:(dev) ✗ git commit -m "v0.0.3" [dev 604e309] v0.0.3
 3 files changed, 11 insertions(+), 2 deletions(-) ➜ catch_imooc2 git:(dev) git push origin dev

2：合併分支代碼到master：
➜  catch_imooc2 git:(dev) git checkout master
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
➜  catch_imooc2 git:(master) git merge dev
Updating 0a08ae7..604e309
Fast-forward
 README.md         | 4 +++-
 doc/use/README.md | 7 +++++++
 package.json      | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)
➜  catch_imooc2 git:(master) git push origin master
Total 0 (delta 0), reused 0 (delta 0)
To github.com:HLPJay/catch_imooc2.git
   0a08ae7..604e309  master -> master

3:建立tag標籤製做新版本：
➜  catch_imooc2 git:(master) git tag -a "v0.0.3" -m "v0.0.3"       
➜  catch_imooc2 git:(master) git push origin "v0.0.3"       
Counting objects: 1, done.
Writing objects: 100% (1/1), 158 bytes | 158.00 KiB/s, done.
Total 1 (delta 0), reused 0 (delta 0)
To github.com:HLPJay/catch_imooc2.git
 * [new tag]         v0.0.3 -> v0.0.3

4：提交npm：
➜  catch_imooc2 git:(master) npm publish .                  
+ hlp7777@0.0.3

5：結果驗證：
1：在npm項目主頁看到v0.0.3版本的代碼已經生成。
2：登陸CDN 查看版本已經自動更新 https://unpkg.com/hlp7777/release/bundle.js
　　　顯示結果：https://unpkg.com/hlp7777@0.0.3/release/bundle.js
3：升級完成

　　附：遠端用界面把別人提交的merge合併到master以後，本地要執行pull命令拉取遠端最新的代碼。

　　4.9：網站官網：

　　　　參考：https://pages.github.com/

　　　　1:建立一個命名以你github項目帳號（用戶帳號）+github.io的git庫：

　　　　　　如個人gitHub用戶爲HLPJay 建立的項目爲HLPJay.github.io.

　　　　2:在該庫下新建index.html文件便可用HLPJay.github.io.直接訪問到。

　　　　3：項目相關的網頁，能夠用gitbook build生成的html文件直接拷貝過來。

➜  catch_imooc2 git:(master) cp -r _book/* ../HLPJay.github.io

　　　　4：提交該庫下的代碼，直接訪問測試，這裏訪問的時該庫下對應的index.html的頁面：

聲明：

該博文只是爲了規範本身的習慣，總結遇到過的問題，若有問題，建議或者觸犯，請諒解並及時通知我更正。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。