在vscode打开setting.json配置文件

在MAC中,

command + shift + p

输入 setting.json

Open Settings(JSON) 通常当我们使用vscode的时候, 需要对此进行配置, 相当于是初始设置, 那么后续其他项目通过此vscode打开时, 都会应用该配置文件, 所以通常我们会统一配置文件.
Open Workspace Settings(JSON) 当前项目文件夹工作区的配置文件, 在项目通过vscode打开的情况下, 会在文件目录默认创建一个.vscode文件夹, 而setting.json就是在这个.vscode文件夹之下,

目录 .vscode/setting.json

当你仅仅想针对当前的项目取消eslint的检测时(其他项目依然会有eslint检测), 可以在.vscode/setting.json文件内:

{
 "eslint.enable": false
}

Open Default Settings(JSON) 默认的配置文件, 通常情况下不会修改这个文件

查看电脑(mac)某个端口的进程

查找进程PID(进程端口号: 3000)

lsof -i :3000

如果没有查找到进程信息, 说明该端口号没有进程

kill进程 (node进程PID: 2478)

kill -9 2478

解释: -9 表示立即终止该进程, 其他值 -3, -15是来实现更加柔和的终止, 从而允许进程自行清理

关于vscode编辑器中项目使用prettier

预期: ctrl + s 保存时自动prettier code.

vscode 安装 Prettier - Code formatter 插件
根目录, 创建 .prettierrc.js 文件(仅供参考, 约定大于规则)

// 大部分prettier规范采用@umijs/fabric团队的. 在项目中验证体验很好
const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
  tabWidth: 2,
  singleQuote: true,
  semi: true,
  jsxSingleQuote: true,
  bracketSameLine: false,
  trailingComma: 'none'
};

根目录, 创建 .prettierignore 文件(prettier忽略的文件)

**/*.svg
**/*.json
**/*.png
**/*.txt
**/*.log
*.md
dist
mock
node_modules
public
scripts
index.ejs
yarn-error.log
yarn.lock
.gitignore
.prettierignore
.stylelintrc

在vscode中 comman + shift + p

输入/选择 Format Document With...

选择 Configure Default Formatter

选择 Prettier - Code formatter

完成, 在项目中试试prettier效果
关于 prettier的报错内容可以查看, vscode左下角的prettier, 如下正确使用的场景:

读取.prettierrc.js 忽略.prettierignore中配置的文件

React JS项目如何升级TS, webpack配置部分

webpack详解: v4.webpack.js.org/guides/type…

第一步:

{
  module: {
    rules: [
       {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
       }
    ]
  }
}

第二步:

// 原先的
extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],

// 更新后
extensions: ['.tsx', '.ts', '.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],

关于在三方站点嵌入iframe, 三方登录cookie无法写入的问题

场景: 在乙方系统中,通过iframe嵌入甲方系统,甲方系统无法登录的问题

原因: 浏览器中cookie安全起见,是无法直接在其他域名下写入cookie的

解决办法: 在服务端set-cookie中,加入 ;

'SameSite=None; Secure'

SameSite在safari中存在兼容问题, 简单理解就是: MacOs 10.14 & IOS 12等版本无法识别 'SameSite=None; Secure'

详见: www.chromium.org/updates/sam…
具体问题: stackoverflow.com/questions/5…

对于Mac可以设置如下:

取消选中"阻止跨站跟踪(Prevent cross-site tracking)"

Safari > Preferences (偏好设置) > Privacy (隐私)

对于iphone可以设置如下:

取消选中"阻止跨站跟踪(Prevent cross-site tracking)"

设置 > Safari浏览器 > 阻止跨站点跟踪 (Prevent cross-site tracking)

pnp-webpack-plugin 和 react-dev-utils/ModuleScopePlugin

pnp(Plug‘n‘Play)是yarn的一个特性:

pnp的出现是为了解决现有依赖管理方式效率太低的问题[只有在yarn包管理的场景才可以生效]

pnp的实现的大致原理, Yarn 会维护一张静态映射表，该表中包含了以下信息：:

当前依赖树中包含了哪些依赖包的哪些版本
这些依赖包是如何互相关联的
这些依赖包在文件系统中的具体位置

可参见pnp的具体原理

react-dev-utils/ModuleScopePlugin

ModuleScopePlugin就是为了防止用户引入src目录之外的文件导致不可预期的结果。因为babel都是通过src目录内文件进行入口转义的，如果你引入了src目录外，例如src1，这样这个文件就不能经过babel转义。除非你保证你引入文件已经经过转义，你可以不使用该插件限制

关于如何判断iPad环境的问题

场景: 我们想要在iPad中保持和IOS或则Android端同样的逻辑, 但我们发现在苹果的iPad中的useragent如下:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

通常我们判断在IOS或者Android的正则如下:

const inIOS = /(ipad|iphone|ipod)/i.test(ua);
const inAndroid = /android/i.test(ua);

我们发现, iPad中的userAgent不包含ipad之类的字符串, 所以inIOS此正则无法判断

const isIpad = () => {
    const ua = window.navigator.userAgent;
    if (ua.indexOf('iPad') > -1) {
        return true;
    }

    if (ua.indexOf('Macintosh') > -1) {
        try {
            document.createEvent('TouchEvent');
            return true;
        } catch (e) {}
    }

    return false;
};

所以在isIpad方法中, 通过document.createEvent('TouchEvent')去判断能否创建成功, 因为在不能触摸屏的浏览器中会报错.

TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件~

我觉得有用的笔记