11月1
11月1
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
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
11月1
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
放入一个目录,例如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
10月25
一、简介
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
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
10月21
10月20
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
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
10月20
[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]
// 由于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]
10月20
在项目下新建文件.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
[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