導(dǎo)語：
??現(xiàn)在的前端技術(shù)發(fā)展太快，所以利用空余時間通過做項(xiàng)目的方式來擴(kuò)展一下自己的知識面，提升自己。
??剛升級了MAC OS系統(tǒng)，遇到了一些問題，比如升級后VScode中的git和svn無法使用等一些問題，不過參考一些文章也解決了，git官網(wǎng)下載重新安裝一下，svn嘛直接禁用掉插件后重新啟動也恢復(fù)使用了。
??我準(zhǔn)備在自己的MAC本上做一個博客，現(xiàn)在本地用，能記錄一些學(xué)習(xí)的筆記，開發(fā)好后上線到自己的服務(wù)器，使用的技術(shù)棧：Node + Mysql + Koa + TypeScript + Nuxt + webpack4 + vue3
準(zhǔn)備階段
操作系統(tǒng)：mac os 10.14.0
代碼工具：VScode 1.28.2
數(shù)據(jù)庫：MySQL 8.0.11
環(huán)境配置
HomeBrew
安裝：
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
更新：
$ brew update
檢測：
$ brew doctor // 檢測brew是否有問題，有問題的話按照提示逐條解決
$ brew list // 檢測brew安裝了哪些包
刪除：
$ brew uninstall node // 刪除安裝的node
NVM
安裝：
$ brew install nvm // 使用brew安裝nvm，node管理工具
設(shè)置：
$ vim ~/.zshrc // 我MAC安裝了oh my zsh，根據(jù)個人情況而定
解除注釋(解除后可以全局使用nvm)：
export NVM_DIR=/usr/local/Cellar/nvm/0.33.11
$ source $(brew --prefix nvm)/nvm.sh
檢查：
$ nvm --version //檢查nvm是否安裝成功
查看：
$ nvm ls-remote // 查看遠(yuǎn)程已經(jīng)存在的node版本
$ nvm ls // 查看本機(jī)已安裝的版本，default表示當(dāng)前使用的版本
Node
安裝：
$ nvm install --latest-npm // 安裝最新版本node
$ nvm install --lts // 安裝最新穩(wěn)定版node
切換:
$ nvm use v11.0.0.0 // 切換node版本
NPM
更換npm鏡像為淘寶鏡像：
$ npm config set registry https://$ registry.npm.taobao.org
$ npm config get registry // 檢查是否更換成功
PM2
安裝：
$ npm install pm2 -g
用法：
# 后臺運(yùn)行pm2，啟動4個app.js
# 也可以把'max' 參數(shù)傳遞給 start
# 正確的進(jìn)程數(shù)目依賴于Cpu的核心數(shù)目
pm2 start app.js -i 4
pm2 start app.js --name my-api # 命名進(jìn)程
pm2 list # 顯示所有進(jìn)程狀態(tài)
pm2 monit # 監(jiān)視所有進(jìn)程
pm2 logs # 顯示所有進(jìn)程日志
pm2 stop all # 停止所有進(jìn)程
pm2 restart all # 重啟所有進(jìn)程
pm2 reload all # 0秒停機(jī)重載進(jìn)程 (用于 NETWORKED 進(jìn)程)
pm2 stop 0 # 停止指定的進(jìn)程
pm2 restart 0 # 重啟指定的進(jìn)程
pm2 startup # 產(chǎn)生 init 腳本 保持進(jìn)程活著
pm2 web # 運(yùn)行健壯的 computer API endpoint (http://localhost:9615)
pm2 delete 0 # 殺死指定的進(jìn)程
pm2 delete all # 殺死全部進(jìn)程
運(yùn)行進(jìn)程的不同方式：
pm2 start app.js -i max # 根據(jù)有效CPU數(shù)目啟動最大進(jìn)程數(shù)目
pm2 start app.js -i 3 # 啟動3個進(jìn)程
pm2 start app.js -x #用fork模式啟動 app.js 而不是使用 cluster
pm2 start app.js -x -- -a 23 # 用fork模式啟動 app.js 并且傳遞參數(shù) (-a 23)
pm2 start app.js --name serverone # 啟動一個進(jìn)程并把它命名為 serverone
pm2 stop serverone # 停止 serverone 進(jìn)程
pm2 start app.json # 啟動進(jìn)程, 在 app.json里設(shè)置選項(xiàng)
pm2 start app.js -i max -- -a 23 #在--之后給 app.js 傳遞參數(shù)
pm2 start app.js -i max -e err.log -o out.log # 啟動 并 生成一個配置文件
你也可以執(zhí)行用其他語言編寫的app ( fork 模式):
pm2 start my-bash-script.sh -x --interpreter bash
pm2 start my-python-script.py -x --interpreter python
Keymetrics
免費(fèi)性能監(jiān)測工具：
$ pm2 monitor
根據(jù)提示輸入用戶名，郵箱，密碼進(jìn)行注冊
啟動項(xiàng)目后，輸入https://app.keymetrics.io/ 登錄后即可查看項(xiàng)目狀態(tài)
ES-Checker
ES6功能檢測工具：
$ npm i es-checker -g // 全局安裝檢測工具
$ es-checker // 紅色的代表不支持的功能
創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)
$ mkdir src
$ mkdir dist
初始化項(xiàng)目并安裝依賴
$ npm init
$ npm install --save koa
$ npm install --save-dev @types/koa tslint typescript nodemon
VScode配置
配置tsconfig.json :
打開終端定位到項(xiàng)目根目錄
$ tsc --init // 生成tsconfig.json文件
{
"compilerOptions": {
"module": "commonjs",
"target": "ES2017",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
配置tslint.json :
手動創(chuàng)建tslint文件來檢測語法
$ touch tslint.json
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces",
2
],
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"no-var-keyword": true,
"quotemark": [
true,
"single",
"avoid-escape"
],
"semicolon": [
false,
"always",
"ignore-bound-class-methods"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-module",
"check-separator",
"check-type"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
],
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-null-keyword": true,
"prefer-const": true,
"jsdoc-format": true
}
}
配置packge.json :
"scripts": {
"start": "npm run serve",
"serve": "node dist/server.js",
"build": "npm run tslint && npm run build-ts",
"build-ts": "tsc",
"watch": "npm run tslint && npm run watch-ts",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
}
配置launch.json :
command+shift+p
> Debug: Open launch.json // 選擇后自動創(chuàng)建調(diào)試用的文件
添加nodemon調(diào)試配置 ->
15411523766709.jpg
修改launch調(diào)試配置 ->
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node調(diào)試",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/dist/server.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
},
{
"type": "node",
"request": "launch", // launch模式
"name": "Launch Program", // 配置名稱；在啟動配置下拉菜單中顯示。
"program": "${workspaceFolder}/dist/server.js", // 程序的絕對路徑。通過查看 package.json 和打開的文件猜測所生成的值。編輯此屬性
"preLaunchTask": "npm: build", // 調(diào)試會話開始前要運(yùn)行的任務(wù)
"outFiles": [
"${workspaceFolder}/dist/**/*.js" // 編譯輸出文件
]
}
]
}
配置tasks.json :
> Tasks: Configure Task
> 使用模板創(chuàng)建 tasks.json文件
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
創(chuàng)建代碼文件：
$ cd src
$ touch app.ts
$ touch server.ts
app.ts
import Koa from 'koa'
const app = new Koa()
app.use(ctx => {
ctx.body = 'Hello world!'
})
module.exports = app
server.ts
const app = require('./app')
const server = app.listen(3000, () => {
console.log('Server is running at http://localhost:3000')
console.log('Press CTRL-C to stop \n')
})
module.exports = server
啟動TS文件監(jiān)聽：
$ npm run watch
啟動nodemon熱更新:
15411680347824.jpg
15411680940110.jpg
打開瀏覽器輸入http://localhost:3000/得到以下結(jié)果:
15411683356529.jpg
完成，可以開發(fā)寫API接口啦！O(∩_∩)O哈哈~
