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

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

[!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 commitgit 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 需带入参数 $REPOcd %1echo 'Remove all local tags'FOR /F %%i in ('git tag -l') DO git tag -d %%iecho 'Fetch tags from origin'git fetch --tags origin// mac 需带入参数 $REPO#! /bin/bashcd $REPO/.gitgit tag -l | xargs git tag -dgit fetch origin --prune --prune-tags

装置 VsCode

• https://code.visualstudio.com/

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

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

搜寻 Powershell，右键以管理员身份运行。set-ExecutionPolicy RemoteSigned 选 Yget-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 --globalnpm config set disturl https://npm.taobao.org/dist --globalyarn config set registry https://registry.npm.taobao.org --globalyarn 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 # 装置 nrmnrm 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 rimrafrimraf ./node_modules

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

npm install -g nodemon# 在本地 888 端口启动 node 服务nodemon ./server.js localhost 888# 提早重启nodemon --delay 2.5 server.jsnodemon --delay 2500ms server.js

• 长期运行可执行包

# 如果咱们有须要可执行的包，但又不想全局装置，防止净化，咱们能够这样做。# 例如：npm i -g cloudcmd # 全局装置 cloudcmdcloudcmd # 能够执行npm i cloudcmd # 部分装置 cloudcmdcloudcmd # not found cmd# 然而咱们能够应用 npx，高版本 node 自带，低版本本人装置 npx。npx cloudcmd # 能够执行，不须要本人设置 $PATH，方便快捷。

• protobufjs

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

npm -g install protobufjs --forcenpm -g install protobufjs-cli --forcepbjs -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 inityarn info [package] [--json/readme] # 查看/输入某个模块的最新版本信息yarn [global] listyarn cache listyarn/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  // 装置最新版 nodenvm install [node版本号]  // 装置指定版本 nodenvm uninstall [node版本号]  // 删除已装置的指定版本nvm use [node版本号]  // 切换到指定版本 nodenvm 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 等。
• 开发与设计我的项目，留神我的项目构造与代码查看等等。
• 对我的项目进行深度优化与封装解耦
• ...