关于前端:前端引导工欲善其事必先利其器

前端疏导 - 工欲善其事 + 必先利其器

[!WARNING]
工欲善其事必先利其器 - 前端

装置 Git

• https://git-scm.com/

Git 配置命令参考

git config --global --list # 查看全局配置
git config --local --list # 查看本我的项目配置

git config --global user.name "用户名" # 设置用户名
git config --global user.email "邮箱" # 设置邮箱

git config --global alias.cm commit
git config --global alias.br branch # 配置指令别名简写

git config --global credential.helper store # 输出一次账号密码后第二次就会记住账号密码

git config --global core.ignorecase false # 敞开疏忽大小写

git config --system core.longpaths true # 配置长门路

git config --global http.sslVerify false # 禁用 ssl 验证

git config --global core.protectNTFS false # 敞开 NTFS 文件爱护

git config --global url."https://".insteadOf git:// # 解决 git:// 报错

装置 SourceTree

• https://www.sourcetreeapp.com/

举荐应用 SourceTree，他是一个 Git 的图形化工具，能够让咱们更高效、便捷、优雅的合作。

• SourceTree 待办

  • 跳过登录办法，将文件 accounts.json放入 %LocalAppData%\Atlassian\SourceTree\。

[
  {
    "$id": "1",
    "$type": "SourceTree.Api.Host.Identity.Model.IdentityAccount, SourceTree.Api.Host.Identity",
    "Authenticate": true,
    "HostInstance": {
      "$id": "2",
      "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountInstance, SourceTree.Host.AtlassianAccount",
      "Host": {
        "$id": "3",
        "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountHost, SourceTree.Host.AtlassianAccount",
        "Id": "atlassian account"
      },
      "BaseUrl": "https://id.atlassian.com/"
    },
    "Credentials": {
      "$id": "4",
      "$type": "SourceTree.Model.BasicAuthCredentials, SourceTree.Api.Account",
      "Username": "","Email": null
    },
    "IsDefault": false
  }
 ]

装置后操作：更新版本；设置英文；配置 ssh；勾销 pull 时疾速合并；开启 force-push；配置个人信息与个性化设置；配置自定义 bat (同步标签等)。

• 同步标签 bat

// windows 需带入参数 $REPO
cd %1

echo 'Remove all local tags'

FOR /F %%i in ('git tag -l') DO git tag -d %%i

echo 'Fetch tags from origin'

git fetch --tags origin

// mac 需带入参数 $REPO
#! /bin/bash
cd $REPO/.git
git tag -l | xargs git tag -d
git fetch origin --prune --prune-tags

装置 VsCode

• https://code.visualstudio.com/

举荐应用 VsCode 进行开发，不便团队代码标准执行。

• 设置 VsCode 利用兼容性以管理员身份运行
• Windows PowerShell 非凡配置（以管理员的身份运行 PowerShell）

搜寻 Powershell，右键以管理员身份运行。set-ExecutionPolicy RemoteSigned 选 Y
get-ExecutionPolicy 等于 RemoteSigned 即可

装置 Node

• https://nodejs.org/en/

nodejs 配置

• 全局装置 yarn：可大大提高插件装置速度，确保不同机器 / 环境上装置的 node_modules 雷同。

npm install yarn -g

• 替换 npm 装置源：官网源的访问速度太慢，切换到淘宝镜像源。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

// 查看以后 npm 镜像，默认是 https://registry.npmjs.org。npm config get registry

// 防止 Module build failed: Error: Cannot find module 'xxxxx'
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

// 装置 cnpm，留神应用 cnpm 时，--save 在 npm 高版本中是能够省略不写的，然而 cnpm 还是须要写的。npm install -g cnpm --registry=https://registry.npm.taobao.org

// 当然也能够应用 nrm 治理
npm i -g nrm # 装置 nrm
nrm ls # 查看所有源
nrm use cnpm # 应用指定源
nrm add <registry> <url> [home] # 增加源
// 能够通过 -h 查看帮忙，个别都是 nrm [options] [command]。--------------------------------------------------

// electron 相干
# 设置华为镜像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

# 浏览器引擎驱动镜像改成国内镜像
npm config set chromedriver_cdnurl https://mirrors.huaweicloud.com/chromedriver

# electron 镜像改成国内镜像
npm config set electron_mirror https://mirrors.huaweicloud.com/electron/

# electron_builder_binaries 镜像改成国内镜像
npm config set electron_builder_binaries_mirror https://mirrors.huaweicloud.com/electron-builder-binaries/

# 如果装置了 yarn，把 yarn 镜像也改成国内镜像
yarn config set registry https://mirrors.huaweicloud.com/repository/npm/

• 全局装置pm2：方便管理、监控 node 服务，蕴含 nodemon 的性能。

npm install pm2 -g

• 全局装置 rimraf：不便删除文件或目录，特地是像 node_modules 这种层级很深的，咱们常常删不洁净或者删除很慢。

npm install -g rimraf
rimraf ./node_modules

• 全局装置nodemon：nodejs 我的项目热重载，不便开发调试；能够自动检测文件更改，并重新启动运行来调试基于 node.js 的应用程序。

npm install -g nodemon

# 在本地 888 端口启动 node 服务
nodemon ./server.js localhost 888

# 提早重启
nodemon --delay 2.5 server.js
nodemon --delay 2500ms server.js

• 长期运行可执行包

# 如果咱们有须要可执行的包，但又不想全局装置，防止净化，咱们能够这样做。# 例如：npm i -g cloudcmd # 全局装置 cloudcmd
cloudcmd # 能够执行

npm i cloudcmd # 部分装置 cloudcmd
cloudcmd # not found cmd

# 然而咱们能够应用 npx，高版本 node 自带，低版本本人装置 npx。npx cloudcmd # 能够执行，不须要本人设置 $PATH，方便快捷。

• protobufjs

用于转换 proto 文件为 js 文件，配合 WebSocket 应用。

npm -g install protobufjs --force
npm -g install protobufjs-cli --force

pbjs -t json-module -w es6 -o src/proto/proto.js src/proto/monitor.proto

# 我的项目中
npm i protobufjs

# WebSocket Protobuf 交互示例
# https://gitee.com/doubleam/ws-protobuf-demo
# ----- 其余介绍 -----
# 前端通用模板应用
# npm i js-xcmd -g
# xcmd create-web-base [dir] [branch]
# client-main ===> c-main
# client-modules ===> c-modules
# simple-cross-platform ===> cross

• 其余

npm init # 初始化我的项目
npm info [package] [--json/readme] # 查看 / 输入某个模块的最新版本信息
npm list -g [--depth 0] # 列出全局已装置模块 depth: 深度
npm cache clean [--force] # 删除安装包缓存
npm cache verify # 验证缓存数据的有效性和完整性，清理垃圾数据。npm update # 降级当前目录下的我的项目的所有模块
npm update express # 降级当前目录下的我的项目的指定模块
npm update -g express # 降级全局装置的指定模块

npm init # 会生成一个 package.json 的文件，我的项目的配置信息。--save # 示意装置到本地的我的项目依赖中，也就是说不论程序是上线还是开发阶段，该类库始终须要。--save-dev # 示意装置到本地的开发依赖中，可简写为 -D，该类库仅仅在开发阶段应用，我的项目打包上线后不会蕴含该类库。--global # 可简写为 -g。npm install 包名 [-g] # 示意装置的意思，可简写为 i。npm uninstall 包名 [-g] # 卸载装置的包或者应用 rimraf 删除整个目录。# 部分：node_modules
# 全局：`C:\Users\hxb\AppData\Roaming\npm` 还有局部在 `C:\Users\hxb\`。xxx -h / -help / --help # 个别能够查看该命令的帮忙
xxx -v / -V / --version # 个别能够查看版本

yarn init
yarn info [package] [--json/readme] # 查看 / 输入某个模块的最新版本信息
yarn [global] list
yarn cache list
yarn/yarn install [--force]
yarn upgrade [global] # 更新包
yarn [global] add [package] --save(-s)
yarn [global] add [package] --dev(-d)
yarn remove [package] [--force]
yarn cache dir # 缓存文件目录门路
yarn cache clean # 清理缓存
yarn cache clean --mirror # 清理全局缓存
yarn cache -h # 查看更多应用办法帮忙
yarn config set cache-folder <path> # 通过指定 --cache-folder 的参数来指定缓存目录
yarn run/test xxx # 运行 xxx

package.json 版本查看

• 第一步：应用 npm 命令查看曾经过期的安装包

npm outdated

• 第二步：装置 npm 降级插件(可不应用 -g 进行全局装置)

npm install -g npm-check-updates

• 第三步：查看最新的版本命令(可略)

ncu

• 第四步：降级低版本的 npm 包文件

ncu -u 如报错则应用命令指定包文件 ncu -u --packageFile package.json

• 不过也有像 GitHub 等网站都有主动降级的 bot，也能够应用这种形式，只是合并分支很丑(0.0)。

scripts 配置实例

"scripts": {
  "dev": "npm run start:dev",
  "pretest": "node ./tests/beforeTest.js",
  "test": "umi test",
  "test:all": "cd ./test_dir && npm install && node ./run-tests.js && rimraf ./node_modules"
}

// 栗子: npm run dev
// 能够利用 scripts 来做一些 hooks 操作，简化固定流程或操作。// 比方有时候可能须要提交公布前主动打包并生成文档，能够应用 prepublish hook 来进行脚本执行，文档生成举荐：jsdoc+jsdoc-to-markdown/typedoc+typedoc-plugin-markdown

装置 nvm 治理 Node 版本

• https://github.com/coreybutler/nvm-windows/releases

下载 nvm-setup 并装置，咱们开发中常常会碰到一些 Node 的版本兼容问题，应用 nvm 能够帮忙咱们疾速切换，极其不便。

nvm ls  // 列出所有已装置的 node 版本

nvm ls-remote  // 列出所有近程服务器的版本（官网 node version list）nvm list  // 列出所有已装置的 node 版本

nvm list available  // 显示所有可下载的版本

nvm install stable  // 装置最新版 node

nvm install [node 版本号]  // 装置指定版本 node

nvm uninstall [node 版本号]  // 删除已装置的指定版本

nvm use [node 版本号]  // 切换到指定版本 node

nvm current  // 以后 node 版本

nvm alias [别名] [node 版本号]  // 给不同的版本号增加别名

nvm unalias [别名]  // 删除已定义的别名

nvm alias default [node 版本号]  // 设置默认版本

nvm version  // 查看 nvm 版本，查看是否装置胜利。

其余工具举荐

• 抓包工具：Fiddler、Charles、WireShark
• 浏览器：Chrome、Edge
• 服务器管理工具：SecureCRT、XShell
• 接口测试工具：Postman、ApiPost、ApiFox
• FTP 工具：XFtp、FileZilla
• 疾速编辑工具：Notepad++、Sublime
• Windows Docker: Docker Desktop
• 数据库治理: Navicat、DBeaver
• 近程合作：向日葵、ToDesk
• 梯子：Shadowsocks、V2Ray、Clash For Windows
• Windows APP：终端、WSL、UTools

技术筹备

疾速开始

• 浏览团队前端开发文档，明确方向，对立认知。
• 相熟团队代码标准、工程构造、搭建开发环境。
• 调试代码、理解工程构建流程、原理。
• 保护封装团队常用工具、组件、我的项目等，比方：js-xxx/js-xhttp/js-xcmd 等。
• 开发与设计我的项目，留神我的项目构造与代码查看等等。
• 对我的项目进行深度优化与封装解耦
• …