01 ReactJs开发环境

1.1 Nodejs安装

Nodejs安装要注意的一个问题是npm镜像。

#如果机器上没有安装过nodejs下载安装https://nodejs.org/en/
#如果已经安装过nodejs需要升级安装nodejs,需要安装一个版本管理工具 n
sudo npm install -g n
#如果不安装node,在mac系统下
brew install n
#安装完成后,安装nodejs最后发布的稳定版本
sudo n lts
#安装完成执行“n”切换Node环境
n

node安装完后，可以使用npm来管理各种js软件包，这个类似java或python的各种包

#npm设置阿里的镜像，这样是在.npmrc文件中设置
npm config set registry https://registry.npm.taobao.org
#安装包
npm install abc      # 本地安装
npm install abc -g   # 全局安装
npm install xxx #安装但不写入package.json
npm install xxx –save #安装并写入package.json的”dependencies”中
npm install xxx –save-dev #安装并写入package.json的”devDependencies”中
npm uninstall xxx #删除xxx模块； 
npm uninstall -g xxx #删除全局模块xxx；
#查看当前路径的包
npm ls

1.2 TypeScript配置

使用全局方式安装typescirpt编译器

npm install -g typescript
# 居于tsconfig.json编译
tsc 
# 编译器默认转换
tsc index.ts
# 默认设置的编译转换文件加下的所有文件
tsc src/*.ts
# 使用tsconfig.json编所有文件
tsc --project tsconfig.json src/*.ts

1.3 Visual Studio Code配置

vscode 的预设变量值 ${workspaceFolder} :表示当前workspace文件夹路径，也即/home/Coding/Test ${workspaceRootFolderName}:表示workspace的文件夹名，也即Test ${file}:文件自身的绝对路径，也即/home/Coding/Test/.vscode/tasks.json ${relativeFile}:文件在workspace中的路径，也即.vscode/tasks.json ${fileBasenameNoExtension}:当前文件的文件名，不带后缀，也即tasks ${fileBasename}:当前文件的文件名，tasks.json

${fileDirname}:文件所在的文件夹路径，也即/home/Coding/Test/.vscode

${fileExtname}:当前文件的后缀，也即.json

${lineNumber}:当前文件光标所在的行号

${env:PATH}:系统中的环境变量

字体使用FiraCode字体

1.3.1 对TypeScript的配置

首先生成tsconfig配置文件，tsc编译的时候会使用这个配置文件来添加编译条件

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  }
}

然后生成launch.json,用于调试执行

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "skipFiles": [ "<node_internals>/**"],
      "program": "${workspaceFolder}/basic-type.ts",
      "preLaunchTask": "tsc: 构建 - tsconfig.json",
      "outFiles": [ "${workspaceFolder}/out/**/*.js"]
    }
  ]
}

1.3.2 开发React(用TypeScript)的配置

创建一个用Typscript开发的React应用：

npx create-react-app react-with-ts --template typescript
cd react-with-ts
npm start

1.3.3 iterm2配置

安装 Oh my Zsh

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安装字体

git clone https://github.com/powerline/fonts.git --depth=1
# install
cd fonts
./install.sh
cd ..
rm -rf fonts

修改~/.zshrc主题

ZSH_THEME="agnoster"

自动补全

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
修改.zshrc
plugins=(git zsh-autosuggestions)
sourc ~/.zshrc#重启会话

修改iterm2颜色主题-Solarized Dark，修改字体-Meslo LG M DZ Regular for Powerline

1.4 前端测试API环境

1.4.1 json-server

1.4.2 阿里云部署Easy-Mock

通过docker安装更快，注意centos8要先卸载原有的docker,然后参考https://get.daocloud.io/#install-docker安装。 因为服务器是在阿里云上，因此可以通过阿里云的docker镜像加速

1 安装nodejs
服务器上最好安装nvm,适应不同的版本要求

git clone https://gitee.com/mirrors/nvm.git
cd nvm
./install.sh
source .bashrc #更新一下环境变量

2 安装mongodb和redis

#mongodb的安装查询yum install
wget https://download.redis.io/releases/redis-6.0.10.tar.gz
tar xzf redis-6.0.10.tar.gz
cd redis
make
mkdir redis6
cp ~/redis-6.0.10/src/redis-server ./ #拷贝到当前目录
cp ~/redis-6.0.10/src/redis-cli ./
#编辑配置文件redis.conf
daemonize yes #守护进程运行
maxmemory 128MB #最大内存
./redis-server redis.conf #运行
netstat -anp | grep 6379 #检查启动成功

3 安装easy-mock通过http://8.134.55.159:7300/定义测试api 用户名 admin 密码 123456

git clone https://github.com/easy-mock/easy-mock.git
cd easy-mock && npm install
# 前端静态资源构建打包,node的版本是8.17,这个对node版本有要求
npm run build
#pm2管理后台进程
npm install pm2 -g
NODE_ENV=production pm2 start app.js

1.4.3 使用fastmock

https://www.fastmock.site 用户名 iceblog 密码 123456