TOMMYHU

偶尔要处理图片，ps太大，麻烦，这个14m，绿色免安装，p起来

给window右键新增超级管理员cmd
下来双击运行即可

npm install -g create-react-app
create-react-app my-app
cd my-app/
yarn start

[codes=c#]
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in D:\study\react\hello-react\node_modules\postcss-safe-parser\node_modules\postcss\package.json
[/codes]


node降级

gnvm use 14.7.0
yarn start
success

down gnvm
放入一个目录，例如d:\node
目录加入系统环境变量
重新管理员打开cmd
// 初始化
gnvm config
// 设置淘宝源
设置淘宝源是个很棒的操作，从此下载飞快……
gnvm config registry TAOBAO
// 安装node@14.7.1
gnvm install 14.7.0
// 查看已安装的版本
gnvm ls
// 使用已经安装的版本
gnvm use 14.7.0

一、简介
whistle是一款基于Node的跨平台web调试代理工具。主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可作为HTTP代理服务器使用。
在调试移动端项目时，我们无法像在Chrome开发工具下那样看到请求、日志、DOM结构等。当然，使用vConsole可以解决以上问题，不可否认vConsole能满足移动端调试的大多数场景，并且十分便利。但是vConsole必须要作为一款插件注入项目代码中，这就有了局限性。whistle相比之下就没有限制。whistle的功能十分强大，本文只介绍安装入门。

二、安装
安装Node。（不再介绍）
安装whistle。
npm install -g whistle

启动whistle
w2 start
配置代理
推荐安装Chrome代理插件SwitchyOmega。
第一种安装方式是通过FQ。
第二种安装方式是安装谷歌访问助手，有了谷歌访问助手便可以在谷歌商店下载软件以及使用google搜索引擎。安装完成SwitchyOmega之后，配置代理。官网介绍非常详细。
移动端调试时，移动设备要与PC在同一WiFi下，并且要给移动设备网络配置代理，代理服务器是PC的IP地址，端口号为PC上代理服务器配置的端口号
访问 配置页面
域名访问http://local.whistlejs.com/，或者IP+端口访http://127.0.0.1:8899/
HTTPS证书安装
首先是windows下安装根证书，然后移动设备(以ios为例)在代理网络环境下，Safari地址栏输入rootca.pro，安装完成之后需要手动信任根证书。设置-通用-关于本机-证书信任设置下设置信任根证书。
在 配置页面 导航栏的HTTPS选项中，勾选Capture HTTPS CONNECTs，即可抓取HTTPS请求。然后在移动设备访问页面时，即可在 配置页面 的Network中看到请求。
PS:本文只是对安装入门做了粗略总结，对部分注意细节进行阐述。关于whistle更详细介绍、更多的功能请移步官网。



pc端chrome抓包

whistle 的代理
在 whistle 启动完成后，我们需要将浏览器的请求代理到 whistle，这样 whistle 才能处理浏览器发出的请求。为此，我们需要安装一个 SwitchyOmega chrome 扩展程序。

SwitchyOmega 安装与配置
访问这个链接，点击“添加至 CHROME”，点击弹框“添加扩展程序”，如果被墙了访问不了，可以 点这里 选择 SwitchyOmega_Chromium.crx 下载，下载后在浏览器地址栏输入 chrome://extensions/，回车打开页面，将下载的文件拖动到 extensions 那个页面，点击安装扩展即可。
页面会自动跳转到 SwitchyOmega 的配置页，点击“跳过教程”
点击左侧“新建情景模式…”，弹框提示“情景模式名称”，你可以输入“whistle”
点“创建”按钮
代理服务器 -> 代理协议，这个下拉选择框选择 HTTP，将 example.com 改为 127.0.0.1，将 80 改为 8899
“不代理的地址列表” 的输入框里的所有文本都删掉，因为里面的 host 在本地开发很大概率会用到
点击左侧“应用选项”
点击 chrome 右上角的圆圈图标，切换成 whistle
浏览器输入 local.whistlejs.com，回车，能打开 whistle 的界面，说明 SwitchyOmega 的配置 ok

有没有过这样的困扰，好好的项目，别人可以安装包，运行，你不行，
其他同学git clone，yarn，yarn dev就开始搬砖，你则一堆报错，法克

迭代了一个package的版本，然后又不行了，法克

清理下缓存吧，现在前端即使你写个hello world，也要装 千儿八百的包，，，害

windows用户建议cmd管理员身份运行

[codes=c#]
npm cache clean --force
yarn cache clean
[/codes]

git：https://github-releases.githubusercontent.com/

TortoiseGit：https://download.tortoisegit.org/tgit/2.12.0.0/TortoiseGit-2.12.0.0-64bit.msi

fork ：https://www.git-fork.com/update/win/ForkInstaller.exe

kdiff3，免费好用：https://nchc.dl.sourceforge.net/project/kdiff3/kdiff3/0.9.98/KDiff3-64bit-Setup_0.9.98-2.exe

typora，markdown编辑器：https://www.typora.io/windows/typora-setup-x64.exe?

node：https://nodejs.org/dist/v14.18.0/node-v14.18.0-x64.msi

gnvm 多node版本管理：http://ksria.com/gnvm/
添加到环境变量，超管cmd执行gnvm config

nrm 多npm源管理
npm install -g yarn

yarn 包管理
npm install -g yarn


vscode：https://az764295.vo.msecnd.net/stable/c13f1abb110fc756f9b3a6f16670df9cd9d4cf63/VSCodeUserSetup-x64-1.61.1.exe
推荐字体：vscode字体Fira_Code_v5.2

postman：https://dl.pstmn.io/download/latest/win64

fiddler：https://telerik-fiddler.s3.amazonaws.com/fiddler/FiddlerSetup.exe

axure：https://axure.cachefly.net/versions/9-0/AxureRP-Setup-3727.exe

dbeaver 支持关系，nosql等主流数据库：https://dbeaver.io/

chrome
https://www.google.cn/chrome/
插件推荐：axure，沙拉查词（很棒的划词翻译），稀土掘金（每日必看），草料二维码，vue tools

[codes=c#]
// 由于husky版本差异，这里固定版本拉
yarn add -D husky@7.0.1 @commitlint/cli @commitlint/config-conventional
// 安装成功后立即初始化husky目录
npx husky install
[/codes]

在生成的.husky目录下新建

新建pre-commit文件
[codes=c#]
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test
[/codes]
新建commit-msg文件
[codes=c#]
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"
[/codes]

package.json，这样后面的兄弟们在yarn的时候就初始化husky了
[codes=c#]
"prepare": "npx husky install"
[/codes]

根目录新建.commitlintrc.js文件
[codes=c#]
module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
      'type-enum': [
        2,
        'always',
        [
          'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
          'feat', // 新功能（feature）
          'fix', // 修补bug
          'docs', // 文档（documentation）
          'style', // 格式（不影响代码运行的变动）
          'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
          'test', // 增加测试
          'chore', // 构建过程或辅助工具的变动
          'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
          'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
          'perf', // 改善性能
          'build', // 变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
          'ci', // 更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
        ]
      ]
    }
  }

[/codes]

在项目下新建文件.npmrc
[codes=c#]
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org
[/codes]
重新yarn