张庆的笔记

typescript window 如何type

Wed, 01 May 2024 00:00:00 GMT

背景

业务代码中，会涉及到大量从window读取自定义属性，如何声明 window 很重要

// ts error: Property 'X' does not exist on type 'Window & typeof globalThis'.
window.X;

解决方案

1) 重新声明 window 类型

window 本质上是 Window 类型，那么直接可以通过全局声明重写

declare global {
  interface Window {
    X: number;
  }
}

window.X // number

global 是 ts中关键词，所有在 global 闭包中的会自动提升至全局。此处必须用 interface 因为 interface 有自动合并的能力

2) 局部as

适用于临时解决

(window as (typeof window & { X: number })).X // number

3) xx.d.ts 重写

所有 d.ts 文件自动会提升至全局

// win.d.ts
interface Window {
  X: number;
}

// other.ts
window.X // number

Reference

interface 合并

window 如何声明

webstorm 使用手册

Tue, 30 Apr 2024 00:00:00 GMT

背景

idea 版本之间个人配置在跨版本升级时，经常容易丢失。此处记录下如何配置, 以防丢失

inlay hints

中文意思镶嵌提示

img.png

开启后变量后面有相关的类型显示，但是会导致在开发过程中闪动和文案超长，大幅降低阅读性

img_1.png 开启

img_2.png 关闭

通过 settings -> Inlay hints -> 关闭 types 解决

img_3.png

Reference

https://www.jetbrains.com/help/webstorm/inlay-hints.html#enable_inlay_hints

open graph protocol 使用

Wed, 02 Aug 2023 00:00:00 GMT

The Open Graph protocol 属于 SEO 中的一部分，在支持 og 协议的社交平台中把链接转为卡片渲染，能极大增加网页链接被点击率。本文通过升级当前文档系统集成 og 标签，从而更进一步了解 og 协议

标签说明

og:title

卡片标题

og:description

卡片描述

og:url

点击链接

常用标签描述

其他一些标签详见文档

绝大部分社交平台不会执行 js, 故标签的生成必须在服务端

应用

使用 react-helmet 注入关联 meta 标签

import Helmet from 'react-helmet'
const meta = [
  {
    property: 'og:image',
    content: 'path-to-image',
  },
  {
    property: 'og:url',
    content: siteMetadata.siteOgUrl + slug,
  },
  {
    property: 'og:title',
    content: title,
  },
  {
    property: 'og:description',
    content: post.excerpt || tags.join(' '),
  },
]

const Head = () => {
  return <Helmet htmlAttributes={{ lang: 'cn' }} title={title} meta={meta} />
}

gatsby 默认使用服务端渲染，故无需关注其他问题

实际钉钉中效果

钉钉中效果

电报效果

Reference

The Open Graph protocol

iframe media 自动播放

Mon, 03 Apr 2023 00:00:00 GMT

前言

近期在项目中集成软电话插件，遇到不少小问题，其中iframe播放问题花了较多时间，此处整理下

media 自动播放

简单来说，是浏览器限制自动播放。下面是官话

Chrome's autoplay policies are simple:
1 、Muted autoplay is always allowed.  静音的能自动播放
2、 Autoplay with sound is allowed if: 带声音自动播放(以下满足其一即可)
    *   User has interacted with the domain (click, tap, etc.).要有交互动作
    *   On desktop, the user's [Media Engagement Index] threshold has been crossed, meaning the user has previously played video with sound. (类似于有各种条件算积分,积分够了就能自动播放,chrome://media-engagement/ 这个可以看分数)
3、The user has [added the site to their home screen]) on mobile or [installed the PWA] on desktop. 用户在移动端添加到主屏幕或者在桌面安装了PWA应用
4、Top frames can [delegate autoplay permission] to their iframes to allow autoplay with sound.(顶级frame可以授权给iframe加载的内容)

解决方法:

iframe设置allow="autoplay"标，这种方式适合能操作容器页面的情况，使用时会有权限提示，需要用户手动允许
保证iframe同源，即容器域名和iframe域名一致。

Reference

Chrome autoplay

typescript is keyword

Sat, 06 Aug 2022 00:00:00 GMT

背景

ts 中is关键词和特殊，最近深入了解了下，下面作为笔记

is 作用

is 关键词用于类型推断，和as类似，区别是as可以在函数里面使用， is用于函数的返回定义, 改变的是整个上下文

type Fish = {
  swim: () => void
}

type Bird = {
  fly: () => void
}

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined
}

is 的使用

典型的判定类型方案，若期望使用更精准的类型，不要简单在函数做出 boolean 类型，而是设置入参为期望的类型，那么后续闭包中该对象会自动解析成 is的类型

// 返回类型指定 入参为 string, 那么上下文能自动推断
function isString(test: any): test is string {
  return typeof test === 'string'
}

function example(foo: any) {
  if (isString(foo)) {
    // 此处ts 上下文能自动识别 foo 是 string 而不是 any
    console.log('it is a string' + foo)
    console.log(foo.length) // string function
  }
}
example('hello world')

Reference

using-type-predicates

eth sol dot 对比

Sun, 15 May 2022 00:00:00 GMT

背景

最近在调研长期定投的货币，btc,eth,sol,dot 是最终的几个选项，以下是通过一些资料查询总结的一些共同，不同点。

现状

eth

主打智能合约, 仅此于 btc, 当前唯一可能超越 btc 的币种，成熟且稳定，风险相对较小。现阶段依然处于 1.0(pow)中，未来能否顺利过度到 2.0(pos)是其保持地位的关键。

sol

核心功能为速度快，官网描述交易处理量上限可以为 710,000 tps, 是所有链中最高的。交易手续费对比 eth 极其低廉, 现阶段有大量的 dApps 基于 sol 开发，应用生态丰富，是当前应用场景下最强币种。缺点是验证节点并非完全去中心化，eth 是其最大竞争对手。

dot

公链之王，声称会成为区块链的 layer0, 依然处于开发中。项目本身有很多技术创新点，CEO 为前 eth 的 CTO Gavin James Wood, 技术背景一流。同样项目缺点也比较多

开发进度缓慢, 大量功能均未开发完成
dApp 应用缺乏
市场热度过高，币价太高

对比(2022-05-15)

所有对比基于当前日期(2022-05-15)

当前价格

币种	价格	总市值排名	总市值($)
eth	2,006	2	243,118,733,766
dot	10.96	11	10,870,179,272
sol	50.18	9	17,041,224,508

当前价格 dot 价格偏高

交易速度

币种	当前速度（tps）	官网最大速度(tps)
eth	30	10,000(2.0)
dot	166	1,000,000(parachains & multithreading )
sol	2,276	710,000

核心功能

币种	核心功能	重要性评分 (1-5, 满分 5)	重要性评分未来 (1-5, 满分 5)
eth	智能合约	4	2
eth2.0	shard	3	4
dot	跨链	3	5
sol	速度快，手续费低	4.5	4

评分偏主观，个人认为将来一定是多链共存，链之间通信是一个必须要有的核心功能

Reference

clash 实现vpn真正全局代理

Sat, 26 Feb 2022 00:00:00 GMT

背景

有些程序没有遵守代理规范，使用自定义的方式发起网络请求，这样会导致 clash 即使开了全局代理也无法实现网络代理。这里就需要传统 vpn 中使用的虚拟网卡实现真正的全局代理

设置

https://docs.cfw.lbyczf.com/contents/tun.html

https://docs.cfw.lbyczf.com/contents/tap.html

2 种方式均试过，个人感觉区别不大

TUN TAP 的区别

TUN 协议会代理网络 7 层架构中的 Lay3（网络层），而 TAP 代理 Lay2(数据联络层), 相对来说 TAP 比 TUN 更一层，能代理的网络请求更多。传统 vpn 大量使用 TAP 模式实现全局代理

networkLayer

Reference

TUN/TAP

css 多语言伪类(pseudo-class) lang

Sun, 20 Feb 2022 00:00:00 GMT

背景

近期项目国际化中，需要根据语言使用不同的代码样式, 例如引号，句式，排版等。

使用

:lang( <language-code> )

语言标签可以通过 meta 标签引入

<html lang="en" />
<!--或者-->
<meta name="lang" content="en" />

也可以通过

<div lang="en">
  ...
</div>

优先级规则和 css 保持一致

css 中获取

/* Selects any <p> in English (en) */
p:lang(en) {
  quotes: '\201C''\201D''\2018''\2019';
}

总结

css lang 伪类能解决一部分 js 需要做的逻辑判定问题，减少代码复杂度。但是 lang 无法解决所有问题，有时候还是需要应用 js 处理一些内容和布局问题。

css-in-js 方案更适合灵活页面，推荐 styled-components 可以把 css 变量变为 js, 让 css 的编程方式和 js 保持一致，减少编程语言的 gap

Reference

window之间消息通讯

Fri, 21 Jan 2022 00:00:00 GMT

背景

近期公司产品需要嵌入第三方平台，需要和平台页面进行一部分信息通讯，广泛使用了 window.postMessage, 本文主要介绍 postMessage 的使用和注意事项

使用

targetWindow.postMessage(message, targetOrigin)
targetWindow.postMessage(message, targetOrigin, [transfer])

targetWindow

targetWindow 需要为一个 window 对象，常见使用方为

window(同页面之间,实现 pubsub)
window.parent(或者 window.top) 向父级推送消息
window.frames[0].contentWindow(向 iframe 页面通讯)
window.opener(向打开当前页面的推送)

message

消息理论上支持所有可序列号类型, 内部会通过 Structured_clone_algorithm序列化后传递, 但是实际建议用 string减少奇怪问题

targetOrigin

2 次验证 targetWindow 的 origin 是否符合，若用 * 代表所有。如果 targetOrigin 不符合 targetWindow 的 origin 会拒绝发送，控制台会报错。

敏感信息建议指定 origin，确保安全

transfer

转换器, 通常用不到，用于传输一些大数据。

接收

window.addEventListener(
  'message',
  event => {
    if (event.origin !== 'http://example.org:8080') return

    // ...
  },
  false
)

event.origin

来源 origin, 可以在此处检测是否合法合规

任何时候，都应该检测 event.origin 是否合法

event.data

上面 message 对象, 可能是所有类型，但是建议用 string

event.source

来源 window 对象，可以通过该值实现双向通信 event.source.postMessage('收到消息', '*')

总结

window.postMessage 可以向任何窗口推送消息（不论 origin 是否一致），可以通过 targetOrigin 做安全校验是否发送. 在接收方通过 window.addEventListener("message", cb) 获取消息，通过event.origin 判定来源是否合法, event.source 获取来源 window 对象实现双向通信。

Reference

aura无法识别海盗船内存条

Sat, 08 Jan 2022 00:00:00 GMT

背景

最近装机时，内存条无法实现神光同步，经过多方资料查询发现是软件配置问题。

硬件设备

主板华硕 z690 hero
铂金统治者 ddr5 5600

同步方法

安装 asus aura, icue

需要先安装 asus aura, 然后安装 icue. 然后打开 icue 找到内存，最新版本的 icue 已经默认全局控制打开了

若 icue 无法显示内存，需要到 bios 中 (AI Tweaker -> Tweakers Paradise -> SPD Write Disable = False) 开启功能

安装 icue aura 插件

需要安装插件使得 icue 和 aura 进行通讯，下载地址 https://downloads.corsair.com/Files/CUE/CorsairPluginForAuraSync_2.0.32.msi

下载安装后，打开 aura->设备->主板->可编程指针->重新扫描后就能在 aura sync 下显示内存选项

如果无法显示，需要卸载插件，再次安装重试几次就好

aura setup screenshot

Reference

aura sync crosshair rgb memory

typescript type vs interface

Fri, 19 Nov 2021 00:00:00 GMT

背景

ts 中type和interface都是常用类型，在实际开发中经常混用，顺着双休总结下 2 者的区别

interface 只能描述 object

基础数据类型，只能用 type 声明, 比如 number, string, null

type info = string  // ✅
interface info = string // ❌

interface 可以重名, type 不可以

实际运行时，重名的 interface 会自动合并, interface 不像 type 可以使用 & 合并功能

interface IPerson {
  age: number
}

interface IPerson {
  name: string
}

// 上方等效于 type: type Person = { age: number } & { name: string }

const person: IPerson = {
  name: 'zhang',
  age: 10,
}

// 相当于如下
interface IPerson {
  age: number
  name: string
}

interface 可以继承， type 不行

interface Shape {
  name?: string
  getArea: () => number
}

interface ISquare extends Shape {
  width: string
  height: string
}

const squre: ISquare = {
  width: 10,
  height: 10,
  getArea: () => squre.width * squre.height,
}

type 能使用计算属性

type Keys = 'firstname' | 'surname'

interface IKeys {
  firstname: number
  surname: string
}

type DudeType = {
  [key in Keys]: string
}

// 或者

type DudeType2 = {
  [key in keyof IKeys]: IKeys[key]
}

总结

type 相对来说类型固定，支持原始类型，无法拓展, interface 更适合类库，可以被继承拓展。组件内部更适合type, 对外保留方法更适合 interface

overscroll禁用过度滚动

Fri, 01 Oct 2021 00:00:00 GMT

背景

mac 系统或者 ios 浏览器均有过度滚动(弹性滚动)的情况，后续所有的系统均支持了弹性滚动, 本文探讨如何禁用此特性

非 safari 浏览器

通过使用 overscroll-behavior: contain 禁用弹性滚动. 除 safari 外，所有的浏览器均支持(不支持的浏览器本身也不支持弹性滚动)

safari

html,
body {
  height: 100%;
  overflow: hidden;
}

safari 滚动只作用于 html, body 元素, 仅需禁止其滚动, 然后让其子元素滚动。

结论

综上，需要彻底解决问题

假设 html 如下

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

那么需要设置 css 为如下

html,
body {
  height: 100%;
  overflow: hidden;
}

#root {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

Reference

自定义react render方法

Sat, 28 Aug 2021 00:00:00 GMT

背景

以前，写过一个自定义 react render 的仓库，核心通过 react-reconciler 实现 ract 中生命周期来实现自定渲染。现 react hooks 已经大面积使用，是否可以继续使用上述方法实现自定义渲染？如下是个人尝试

初始工程

react-reconciler 各版本之前不兼容，当前例子为 0.26.2。也是因为这个原因，直接升级 react 版本可能会导致错误

npx create-react-app my-custom-react-hooks

cd my-custom-react-hooks & npm run start

将旧 render 文件复制到新工程下, 创建文件 myRender.js

新建文件 HookComp.js

import React, { useState } from 'react'

export default function() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      count: {count}
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

调整文件 App.js

import logo from './logo.svg'
import './App.css'
import HookComp from './HookComp'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HookComp />
      </header>
    </div>
  )
}

export default App

问题排查

启动报错

error1.png

修复方法: 缺失 clearContainer 方法，补充即可

https://github.com/JennerChen/my-custom-react-hooks/blob/1.0.0/src/myRender.js#L91-L92

无法更新状态

修复方法:

hooks 的 onclick 事件每次都是更新节点都要替换之前的，此处需要特殊兼容处理。

https://github.com/JennerChen/my-custom-react-hooks/blob/1.0.0/src/myRender.js#L66-L72

这涉及到 js 闭包问题，整体比较复杂。记住, 实际 dom 节点原本是绑定的是第一次的 onclick 闭包，之后更新的不会主动替换。本地变量 count 自然永远都是第一次 0

text 文本节点无法更新

https://github.com/JennerChen/my-custom-react-hooks/blob/1.0.0/src/myRender.js#L81-L84

原本 textInstance.text = newText; 本人尝试无法更新节点，不知道 react-dom 内部如何实现该功能的，此处替换 textInstance.replaceData(0, textInstance.length, newText); 即可解决问题

待有空深入了解

结论

react-reconciler 可以帮助开发者高度定制 render 方法，用于一些非传统 web 环境，例如 terminal, hardware iot. 但在使用过程中，也会遇到很多问题，基于时间不够充分，只能见招拆招，不能深入理解。下个月会出一个自定义 react hooks 的能力，实现一个简易版本 react

typescript tsconfig 备忘录

Sun, 22 Aug 2021 00:00:00 GMT

背景

typescript 配置项很多，不像 js 有固定语法，实现一种功能根据配置有多种写法，配置不同会出现不同的语法错误。本文主要分析主要的参数，提高自我对 ts 的理解能力

更准确的强烈推荐使用官方文档, 本文只是阐述个人的理解

compileOptions

target

编译结果版本，ts 本身可以直接替换 babel 编译代码，个人更喜欢使用 babel, 故 ts 的作用仅仅用于 typings。target 作用不大, 用 es5 即可

exactOptionalPropertyTypes

默认是 false, 看如下代码

interface UserDefaults {
  // The absence of a value represents 'system'
  colorThemeOverride?: 'dark' | 'light'
}
// 若 exactOptionalPropertyTypes 启用, 下方代码会报错， 因为 user.hasOwnProperty('colorThemeOverride') 为true
let user: UserDefaults = {
  colorThemeOverride: undefined,
}

noImplicitAny

是否默认赋予所有值为 any, 默认为 false

这个值建议给 false, 若为 true, 相当于启用全局严格模式，不适合快速迭代项目

noImplicitReturns

是否强制函数必须声明返回，问题和 noImplicitAny 类似

allowJs

是否允许 js, 一般建议开启

checkJs

开启 js 后，是否检查 js 文件

skipLibCheck

跳过定义文件的检查，建议用默认的。关闭后只会降低编译速度

esModuleInterop

默认 false, commonjs 和 es6 标准不一致, 会导致不同导入方式存在区别，开启此功能能兼容 2 种标准

allowSyntheticDefaultImports

默认 false, 但建议开启。因为 ts 库会携带大量 typings, 若不开启智能手动引用，影响效率。

forceConsistentCasingInFileNames

默认 false, 但建议开启。因为不同操作系统对文件大小写有区别，此处可以强制区分大小写

isolatedModules

默认 false, 是否开启独立模块。

混合 type 和普通 js 导出会产生运行时 bug, 开启此字段可以提示开发者分开导出

import { someType, someFunction } from 'someModule'

someFunction()

// 开启后此处会报错
export { someType, someFunction }

需要修改成如下方式

import { someType, someFunction } from "someModule";

someFunction();

export type { someType }

export { someFunction };

jsx

react 才需要进行配置, 个人建议用 ‘preserve’, 交由 babel 进行编译

noEmit

默认 false, 若使用 babel 等工具编译时，建议开启。ts 本身就不会出现错误，从而交给 babel 执行

Reference

官方文档

埋点 sendBeacon

Mon, 26 Jul 2021 00:00:00 GMT

背景

埋点分析通常使用图片或者 xhr, 但在一些特定条件下有可能无法正常发出请求，例如埋点记录页面关闭。sendBeacon 就用于这种特定的场景使用

使用方法

navigator.sendBeacon(url)
navigator.sendBeacon(url, data)

其中 url就是请求地址，data可以是任意有效的 Post 数据类型。与 xhr 不同，不会产生跨域问题。

常用方法: 在离开/隐藏页面发起埋点

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData)
  }
})

ie11 不支持 Beacon API

Reference

sendBeacon

个人filecoin 挖矿可行性分析

Sun, 18 Jul 2021 00:00:00 GMT

背景

今年币圈牛市，filecoin 也大涨。 filecoin 挖矿也是热门话题，但是网上很少有资料讨论个人挖 filecoin 本文主要总结下个人挖 filecoin 的可行性分析

为什么个人要挖 filecoin

ipfs 被誉为点对点的网络协议，通常来说 p2p 下载(例如迅雷,电驴)能大幅提升用户下载的速度和文件的可靠性，但是需要所有用户成为节点但成为节点的用户没有任何收益。 filecoin 就是解决这个问题而出现的, filecoin 就是 ipfs 协议上的存储奖励。现阶段个人想要进行 filecoin 挖矿都是需要购买矿机，市场不够透明且规则不清晰，很容易被骗。个人挖矿可以最大程度降低成本。

硬件前提

filecoin 主要存储挖矿。

16core+ cpu
128gb 内存
2T 以上 ssd 硬盘
主流顶配显卡 3080+

每 T 需要额外 6.3 枚 filecoin 封装费(2021-07-18 价格)

另外需要稳定的的网络条件，避免频繁掉线

投入&收益情况

投入

个人挖矿主要都会用一些民用设备(以 50T 为例)

名称	型号	价格
cpu	5950x	5000¥
主板	x570	3000¥
显卡	3090	16000¥
内存	32*4=128	6000¥
电源	2000w	1300¥
硬盘	主盘 2t 980 pro	3000¥
硬盘	16*3=48T 存储盘	7500¥
filecoin	50*6.3=315	94500 ¥
其他	-	2000¥

按照 07-18 今日价格 300 一枚, 共计 150000 ¥

收入

今日 07-18，每 T 每日可以产生 0.04 枚,每年约 14.6 枚，50T 共产生 730 枚。但实际产量起码减少一半，再加上电费网络等损耗，故总计 300 枚。若币价不变的话，可产生收益约 94500，算上扣除质押的 filecoin, 收益还是很可观的。年华收益接近 200%了。

这仅仅是纸面数据，变为现金还需要经过 180 天的空窗期，故实际年华约为 167%。依然是一笔不错的收入。

个人挖矿需要保持稳定的网络环境，这点非常重要，风险也是相当大的。因为 filecoin 机制导致若节点下线，会导致 filecoin 罚没。

结论

个人认为，现阶段个人 filecoin 挖矿收益和风险并存，个人需要稳定的网络环境且质押大量的 filecoin, 前期投入成本较高，但是收益率明显比 eth 挖矿更高。风险也是大，不怎么适合我当下的情况

Reference

ipfs
filescan: filecoin 浏览器

虚拟货币常见术语笔记

Sun, 13 Jun 2021 00:00:00 GMT

虚拟货币常见术语笔记

常见货币

btc: 最原始货币，虚拟货币核心价值
eth: 应用层货币，创建 defi 应用
etc: 以太经典, eth 1.0 就是 etc
bnb: 币安智能链交易货币，与 eth 类似, 但均以币安交易所为核心
fil: FileCoin 是一个文件存储系统, 是 web3.0 的基础构成

收益方式

pow: 工作量证明机制，通过 cpu, 显卡，矿机计算能力决定分配数量
pos: 持有量证明机制, 通过持有特定货币，产生收益，与股票分红类似

通常来说，货币初期更适合按劳分配，因为更公平，初始团队无法获取过多份额，需要通过工作获取。但 pow 会消耗大量资源，俗称不环保，故后期稳定后转为 pos

常见术语

IPFS: 去中心化文件协议，自称 web3.0. 其实本质上是点对点文件系统, 然后通过智能合约保证文件一致性.

什么是 web3.0? 我查询了许多网上资料，均没有给出的直接定义。有很多文章给 web3.0 的定型为: 公开(软件必须开源),去中心化可信赖(https 协议是三方认证，在下一代 web 中，可由个人认证), 不受监管(任何组织个人都可以发布，不受监管). 但是个人认为不一定正确，不能全盘认可这种方案

defi: 去中心化应用

Reference

blockchain: btc 浏览器
etherscan: eth 浏览器

dns 速查

Fri, 21 May 2021 00:00:00 GMT

在天朝查资料总有被墙的时候，此时通过dns 查询真实地址可以快速简易翻墙

https://dns.google/resolve?name=google.com&type=A

国内可以访问 https://tool.chinaz.com/dns/ 查询

Reference

google dns

flex-box text-overflow 注意事项

Fri, 30 Apr 2021 00:00:00 GMT

css text-overflow中与block中使用方式略有不同，此处记录下。

背景

文本无法overflow本质原因是flex布局下子元素非直接文本导致，如果直接文本和普通block没有区别。

<div class="flex-parent">
  <div class="flex-child">
    Text to truncate here.
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

以上能正常truncated

但是，若flex下存在子元素如下

<div class="flex-parent">
  <div class="flex-child">
    <h2>Text to truncate here.</h2>
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>

.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

解决方案

使用 min-width: 0

.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

Reference

issue produce

css flexbox flex-end scroll-x not working

Sat, 20 Mar 2021 00:00:00 GMT

背景

在移动设备中，右对齐弹性布局flex-end 会导致水平滚动失效。可以通过如下方式修复

不使用flex-end，用flex-direction: row-reverse替代

另外可以通过设置 direction: rtl 实现，但实际不实用

Reference

overflow-auto-not-working-with-justify-content-flex-end

css touch-action 应用

Thu, 18 Feb 2021 00:00:00 GMT

在触摸设备中滚动和 touch 其实是同时触发的，这在实际编程中带来了很多不便。css 中touch-action用于控制触控的行为

usage

.el {
  touch-action: none;
}

none

禁用所有的手势操作，由开发者自己控制滚动。常用于在移动设备中实现拖拽能力

touchstart 或者touchmove 事件中默认无法通过使用 e.preventDefault() 禁用滚动，必须设置此 css 才可以解决，详见

auto

默认值

reference

scrolling-intervention

用markdown画流程图

Sat, 16 Jan 2021 00:00:00 GMT

程序架构设计或多或少需要流程图，流程图的绘制因人而异。使用 markdown 能用接近于编程的视角绘制流程图，更能体验逻辑正确. 本文主要基于 mermaid 绘制流程图

安装

mermaid 提供多种安装方式, 一般与 markdown 解析器能都完美集成。当前博客基于 gatsby 实现，通过插件即可直接接入gatsby-remark-mermaid

画法

详细的教程在官网有说明，这里只介绍一些通用的规则

第一行用去声明图类型 graph TD 则为线框图, 如果后续有参数如 TD 表明是改图标的参数

graph

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

class

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

sequence

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!, How about you

gantt

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

pie

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

Reference

in vs hasOwnProperty

Tue, 22 Dec 2020 00:00:00 GMT

背景

最近在阅读一些底层库时，发现都会使用in操作符，而不是hasOwnProperty。和我个人经验略有区别，故查询了些资料，作为 2 者对比。

共同点

const obj = { answer: 42 }
'answer' in obj // true
obj.hasOwnProperty('answer') // true

'does not exist' in obj // false
obj.hasOwnProperty('does not exist') // false

都支持es6 symbol

const symbol = Symbol('answer')
const obj = { [symbol]: 42 }

symbol in obj // true
obj.hasOwnProperty(symbol) // true

不同点

in 操作符会返回 true 原型链中的属性, hasOwnProperty 不会。所以, hasOwnProperty 无法获取 es6 中 class getter, settor 中的字段

'constructor' in obj // true
'__proto__' in obj // true
'hasOwnProperty' in obj // true

obj.hasOwnProperty('constructor') // false
obj.hasOwnProperty('__proto__') // false
obj.hasOwnProperty('hasOwnProperty') // false

class BaseClass {
  get baseProp() {
    return 42
  }
}
class ChildClass extends BaseClass {
  get childProp() {
    return 42
  }
}
const base = new BaseClass()
const child = new ChildClass()

'baseProp' in base // true
'childProp' in child // true
'baseProp' in child // true

base.hasOwnProperty('baseProp') // false
child.hasOwnProperty('childProp') // false
child.hasOwnProperty('baseProp') // false

主要区别如下表

	in	hasOwnProperty
Symbols	✅	✅
inherited properties	✅	❌
es6 getter/setters	✅	❌

应用场景

in 更适合获取是否有方法的对象，通常来说，你希望检查之后，直接执行这个方法，用于检测方法是否存在。 hasOwnProperty 适合 plain object, 查看对象是否真正存在，在业务场景中更适用。

这就能解释，为什么大量底层库均适用in而不是hasOwnProperty。越抽象的库，往往数据间交互已经不是 plain object, 而是封装 class 对象了

Reference

es6 symbol

cookie完全教程

Sun, 29 Nov 2020 00:00:00 GMT

cookie 是后端可以存储在用户浏览器中的微小数据块。用户跟踪、个性化以及最重要的身份验证是 cookies 最常见的用例。

Cookie 有很多隐私问题，多年来一直受到严格的监管

在这篇文章中，我将主要关注技术方面：您将学习如何在前端和后端创建、使用和使用 http cookie。

配置后端服务

使用 express 搭建简易后端服务

git clone -b basic-server https://github.com/JennerChen/cookie-guide.git

cd basic-server && yarn

yarn run server

你将会启动一个 web 服务，通过访问 localhost:3000 会看到页面内容如下

服务端和客户端都可以设置 cookie, 客户端在设置 cookie 时有一些限制。通常来说，在服务端设置的 cookie 用于用户私密状态保存

服务端设置

通过响应头Set-Cookie设置 cookie, 如下代码第 8 行res.set('Set-Cookie', 'mycookie=beaf')会以 key/value 形式设置 mycookie=beaf

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  const content = `
        <h2>basic set cookie</h2>
        <p>cookie demo</p>
    `
  res.set('Set-Cookie', 'mycookie=beaf')  res.send(content)
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

查看本片段代码 https://github.com/JennerChen/cookie-guide/tree/server-set-cookie

查看 cookie:

通过 document.cookie 查看

若不想客户端通过 document.cookie 获取该字段，可以额外添加HttpOnly(res.set(‘Set-Cookie’, ‘mycookie=beaf;HttpOnly’))

通过 chrome devtool 查看

命令行

curl -I http://127.0.0.1:3000 --cookie-jar mycookie

path 和 domain

path用于设置 cookie 在同一个域名下的可见范围，domain用于不同域名之间 cookie 的隔离。

如下例子， cookie scopeValueA只能在 /pathA 路径下获取， scopeValueB只能在 /pathB 路径下获取

app.get('/pathA', (req, res) => {
  const content = `
        <h2>set only pathA</h2>
        <h2>you only can see scopeValue in /pathA</h2>
    `
  res.set('Set-Cookie', 'scopeValueA=pathA;path=/pathA')  res.send(content)
})

app.get('/pathB', (req, res) => {
  const content = `
        <h2>set only pathA</h2>
        <h2>you only can see scopeValue in /pathB</h2>
    `
  res.set('Set-Cookie', 'scopeValueB=pathB;path=/pathB')  res.send(content)
})

和 path 类似，但 domain 只允许设置当前 host, 不允许设置其他域名

app.get('/set-domain-taobao', (req, res) => {
  const content = `
        <h2>don't allow set other domain</h2>
        <h2>you only can set current domain</h2>
    `
  res.set('Set-Cookie', 'otherDomainCookie=beaf;domain=*.taobao.com')  res.send(content)
})

在 chrome 下，会得到一个警告，所以浏览器会拒绝设置。

域名支持 wildcard 配置，简单来说 example.com 能够配置所有 *.example.com 下的 cookie。详见域名匹配规则

异步 ajax 请求

ajax 可以携带/设置 cookie

app.get('/ajax-cookie', (req, res) => {
  let cookieValue = Math.random()
  const content = `
       you were setting cookie ajaxCookie with value ${cookieValue}
    `
  res.set('Set-Cookie', `ajaxCookie=${cookieValue}`)
  res.send(content)
})

在浏览器中，执行如下代码

fetch('/ajax-cookie')
  .then(data => data.text())
  .then(console.log)

若请求为跨域请求(localhost:3000 请求 localhost:3001), 服务端必须配置cors且客户端需要声明 credentials: “include”才能携带 cookie

https 访问: Secure

name

名称， cookie 以 key/value 存储， key 即 name

value

cookie 名称对应的值, 可以以任意字符串保存(json 务必以 JSON.stringify 方式保存)

expire/Max-Age

cookie 有效期, 默认为 Session, 即关闭浏览器即过期。

Max-Age 优先级高于 expire

Max-Age 指客户端创建 cookie, 有效的时间段。 expire 是具体日期如 2020-12-31, 即 2020-12-31 过期

path

path 指 cookie 的范围. 例如 res.set('Set-Cookie', 'scopeValueA=pathA;path=/pathA')，那么 scopeValue 仅可在 pathA 下获取。详见例子

当不传 path, path 默认值为/, 即全部可见

domain

domain 是 cookie 的分割范围，仅能设置当前域名。配置方式和 path 类似

httpOnly

是否允许客户端读取字段，默认 false。若配置为 true, 那么 document.cookie 无法获取。

Secure

是否仅允许 https 协议访问，若配置成 true, cookie 必须在 https 协议下生效

该值仅可在服务端设置

sameSite

共有 3 种有效值，先期默认值为None, 先阶段默认值为Lax。

Lax: 所有的 cookie 只能在first-party端中使用，在third-party会被拦截。但third-party链接会携带 cookie
Strict 所有的 cookie 只能在first-party端中使用，在third-party会被拦截, 包括third-party链接
None cookie 都能在first-party,third-party中使用，但必须开启 secure 标签

first-party 为 _.example.com 的域名。所有不满足 _.example.com 的域名称为 third-party

若期望 cookie 被 third-party 携带，必须启用 secure, 例如 Set-Cookie: flavor=choco; SameSite=None; Secure 。换句话说，必须使用 https 才能搭配 samesite=none 使用

Priority

优先级, 当 cookie 超出容积时，基于如下顺序删除 cookie low->medium->high.默认为 medium, 故常用做法是将用户 token 存于 high, 用户行为信息存于 low

high:
medium
low

Reference

algebraic effects 是什么

Tue, 10 Nov 2020 00:00:00 GMT

前言

react hooks 底层机制参考了 algebraic effects，但在网上搜索这个词汇，大多都是偏学术的，我不擅长谈论学术，只能根据个人经验对 algebraic effects 做一些相关思考

什么是algebraic effects

简单来说，其实就是 try/catch 的一种变体。 algebraic effects 主要解决2个问题

抛错后无法继续执行

function logName(name){
  if(!name) throw "need name input"
  console.log(name)
}

function otherStuff(){
  // ...
}

try {
  logName()
  otherStuff()
} catch(error) {
  
}

上述代码若入参name缺失，会直接停止执行，导致后续 otherStuff方法不被执行。algebraic effects就是解决此类问题的方式，通过增加一个关键词effect或者perform, 既能抛出错误，也能同时恢复代码继续执行

参考如下代码(effect, resume为假定关键词)

effect, resume 关键词当前不存在，仅假设！

function logName(name){
  if(!name) effect "need name input"
  console.log(name)
}

function otherStuff(){
  // ...
}

try {
  logName()
  otherStuff()
} catch(error) {
  if(error === 'need name input') {
    resume "Tom"
  }
}

同时algebraic effects也支持async/await

try {
  logName()
  otherStuff()
} catch(error) {
  if(error === 'need name input') {
    resume await fetch("fetch default name url")
  }
}

面向切片编程(Aspect-Oriented Programming)

自从工作以来, 似乎就没有接触过AOP，依稀记得在大学期间学习java有过短暂接触。algebraic effects主要通过分割无关内容，让开发者更聚焦同一份工作职责(更加模块化)

当前js可以通过 Generator 实现类AOP能力

值不值的使用

algebraic effects比继承，接口，mixin, 对代码本身侵入性更少(不改变原型链)，又比装饰器(Dependent Inject)灵活性更高(可以控制代码任意执行顺序)。特别适合在大型系统层级分明的架构之中。另外react hooks 也是基于理论实现的。但是根据个人经验，在前端领域里面几乎不存在大型系统。

技术在不停向前: java 10年前和现在还是那些主流框架，但是前端近几年从jquery->angular,vue,react的演变, 后面还有大量后起之秀挑战。
js没有编译时: 虽然有babel, 但也仅仅是语法转换没有改变本质。AOP更适合静态语言
Generator比async/await更早出现，但依然输给了async/await, 前端更适合简单易懂的语法
try/catch的缺点对实际开发并无太多影响

Reference

何时重构代码

Sat, 31 Oct 2020 00:00:00 GMT

背景

最近读到Dan Abramov的一篇文章, 提到 Obsessing with “clean code” and removing duplication is a phase many of us go through, 深有同感。在我刚开始学习编程时，似乎对任意代码都迫切的希望重构它，以展现自己学到的新东西，虽然有时候的确成功了，但是在重构之后，总会有一些没有考虑到的问题出现，为此总是懊恼，如何才能下次避免。

想法的由来

这些不停优化的想法来源于学校, 老师总是告诉学生不要重复自己(DRY), 这本身没有问题。但是在实际的项目中，尤其是遗留系统，原先的代码运行的非常好，至少表面上没有任何问题，此时需要进行重构吗？答案很明显是不需要。然而实际情况是: 绝大部分“优秀”的开发者都会或多或少试图重构代码，尤其当只有1人维护一份代码的时候。

对coding本身来说, 一个人独自写一份代码叫创作，而团队合作叫工作

何时重构代码

个人认为首先需要看项目级别:

大型工程，那么只有可能发生在局部重构之中。此时分2个维度: 若模块属于本身，并没有问题。但若和他人合作，必须先沟通后改动。“好的重构往往是更抽象，但抽象又意味着缺少灵活性，只有作者才能更明白其中的平衡”。
中小项目: 局部重构总是受到欢迎。所有的项目都是从小变大，小型项目需要勇于改变才能变大。局部改动沟通很重要, 不同人对重构有不同的看法，也许重构本身是降级。

极致是拿来要求自己的，不能用于要求他人。

git cherry pick

Sat, 19 Sep 2020 00:00:00 GMT

背景

cherry pick用于将特定的 commit 合并到分支，是以一个 commit 为维度。故一般用于将其他分支固定内容合并到 master, 常用于临时发布或者 hotfix。

merge 是以一个分支为维度

usage

git cherry-pick [:hash]

或者仅仅将内容 add, 不进行 commit

git cherry-pick [:hash] --no-commit

Reference

git cherry pick

git cannot lock ref

Fri, 18 Sep 2020 00:00:00 GMT

背景

无法执行git pull , 报类似于

error: cannot lock ref 'refs/remotes/origin/hotfix/0.1.0'

usage

由于本地和远程 origin冲突，故需要删除本地下.git/refs/remotes/origin下的所有文件

rm -rf ./.git/refs/remotes/origin
git fetch

一般这个问题发生在windows中，mac我暂无出现过。

Reference

github issue

react hooks 基础用法

Sun, 06 Sep 2020 00:00:00 GMT

背景

本文主要介绍一下 react hooks 在开发中基础用法。内容按照方法归纳，使用方式可以想见官方文档，主要以技巧为主

技巧

所有 hooks 严禁动态添加

function Comp({ visible, productId }) {
  let info = useState(null)
  if (visible) {
    //❌不要在此处动态返回 hook    useEffect(() => {
      // get product by id
    }, [])
  }

  return <div />
}

react hook 实现原理类似于事件注册机制, 在组件首次初始化时会确定顺序，不可改动。

hooks 依赖中来自组件外或 setState 可以不写入依赖

import { useEffect, useState } from 'react'
import { getProduct } from 'API'

function Comp({ visible, productId }) {
  let [info, setInfo] = useState(null)
  useEffect(
    () => {
      getProduct(productId).then(info => {
        setInfo(info)
      })
    },
    // ✅ 此处不用写 setInfo, 因为是state设置方法
    // ✅ 不写 getProduct 因为方法在组件外
    [productId]
  )

  return <div />
}

在组件中的 setState 在 react 内部保证了 immutable

hooks

useState

与 class 组件中 state 相对于的 hook, 方法与 setState 类似，但是需要注意的是，初始值只会在第一次生效，无法通过修改初始值重置 hook

function Comp({ initCount = 0 }) {
  // ❌ 此处设计不严谨, 无法保证initCount不会变动
  // const [ count, setCount ] = useState(initCount)

  // ✅ 若需要根据prop自动重置state, 那么需要通过useEffect重新执行
  const [count, setCount] = useState(0)
  useEffect(() => {
    setCount(initCount)
  }, [initCount])
  return count
}

useEffect

useEffect 用于模拟各种 react 生命周期

// componentDidMount
useEffect(() => {
  console.log('componentDidMount')
}, [])

// componentWillMount
useEffect(
  () => () => {
    console.log('componentWillMount')
  },
  []
)

// componentDidUpdate
function Comp({ value }) {
  let ref = useRef({
    mounted: false,
    prevValue: undefined,
  })
  useEffect(() => {
    if (ref.current.mounted) {
      console.log('componentDidUpdate')
      console.log(`previous value: ${ref.current.prevValue}`)
      console.log(`current value: ${value}`)
    } else {
      ref.current.mounted = true
    }
    ref.current.prevValue = value
  }, [value])

  return value
}

useRef

useRef 用于获取可变的内容，例如获取 dom 的引用

function Comp({ value }) {
  let ref = useRef({})
  useEffect(() => {
    ref.current.focus()
  }, [value])

  return <input ref={ref} />
}

useMemo

用于性能优化，基础入门无需掌握

Reference

react-hooks

ios输入框无法聚焦focus

Mon, 31 Aug 2020 00:00:00 GMT

问题描述

今天突然发现所有 input 输入框无法输入，初步排查原因是会自动失去焦点

原因

添加了 user-select 的样式

input {
  user-select: none;
}

ios 若改值设为 user-select: none; 那么会导致无法选中的情况。 android 没有问题

方案

重新设置 css

input {
  user-select: text;
}

Reference

webpack-vs-rollup-vs-parcel

Sun, 16 Aug 2020 00:00:00 GMT

现代前端构建工具层出不穷，webpack 是当前最流行的构建工具。但是如果希望打造高效可靠的前端工程，必须根据需求思考这些工具的优缺点。

webpack

简单易用，需要了解一些前端基础构建流程，简单配置即可达到可用状态。webpack 其实为资源打包器, 在复杂项目中，需要通过各种 loader 相互协作对不对资源进行处理实现项目构建。webpack 版本较多，且参与开发人员众多，插件质量参差不齐，在复杂配置中对开发者要求非常高。

易用性: 简单
可配置性: 高
学习曲线: 高
流行性: ✨✨✨✨✨

webpack 适用于业务项目，或者多资源复杂构建项目

rollup

相对小众的 js 构建工具。特别适合用于打包前端 library, 绝大部分的知名仓库均使用 rollup 作为构建工具。rollup 并不适合打包非 js 资源且插件种类较少，故不适用于复杂构建需求。 rollup 遵循do one thing do it best原则，开发者必须显示声明依赖而不是 webpack 的 externals，故能给开发者提供明确的依赖管理内容。

易用性: 中等
可配置性: 低
学习曲线: 高
流行性: ✨✨

rollup 适用于 library

parcel

parcel 是 0 配置工具, 与 create-react-app 类似。用户一般无需再做其他配置即可开箱即用。 parcel 底层并不依赖 webpack, 而是独立一套机制。

易用性: 简单
可配置性: 低
学习曲线: 低
流行性: ✨✨✨✨

parcel 适用于简单项目或者 demo 项目

systemjs介绍

Thu, 30 Jul 2020 00:00:00 GMT

systemjs 背景

与传统 webpack 开发时构建不同, systemjs 着重于运行时构建。故 systemjs 更适合大规模零散开发集成项目。 systemjs 历史其实比 webpack 更久远, 最早用于 angularjs 模块集成。最近由于 chrome 最新版本支持native import一下子重新受到了关注

特性介绍

运行时加载

systemjs 类似于 amd, 在浏览器端执行模块加载而不是在构建时。这极大的提高了代码灵活性，可以在运行时自由的加载新模块而不需要重新构建

native import

systemjs 的写法和 import非常相似, 若将来原生 import普及，可以直接无缝替换。这给开发者无限想象。

systemjs

<script src="//cdnjs.cloudflare.com/ajax/libs/systemjs/6.4.0/system.min.js"></script>

<script type="systemjs-importmap">
  {
    "imports": {
      "react": "//unpkg.com/react@16/umd/react.development.js",
      "react-dom": "//unpkg.com/react-dom@16/umd/react-dom.development.js"
    }
  }
</script>

<script type="systemjs-module" src="./index.js"></script>

native import

<script type="importmap">
  {
    "imports": {
      "react": "//unpkg.com/react@16/umd/react.development.js",
      "react-dom": "//unpkg.com/react-dom@16/umd/react-dom.development.js"
    }
  }
</script>

<script type="module" src="./index.js"></script>

缺陷

深层依赖不可靠

例如 styled-components 相对依赖 react-is, 必须显示声明依赖才可以使用,这无疑提高了开发成本

旧依赖解析不正确

例如 plupload, 由于是旧版本，umd 模块解析会存在问题。故需要额外的处理才能解析

小众

systemjs 历史相对悠久，但相比于 webpack 非常小众，依赖库支持不足

Reference

Import maps: Import Maps v0.5 Implementation Design Doc
import-maps proposal
v8 js modules

react statement management library比较

Fri, 19 Jun 2020 00:00:00 GMT

背景

react 我最喜欢使用什么状态管理库？这里是我对现有流行开源库的理解和比较

setState

对新人最友好,最简单的setState。在 16.8 之后 react hooks出现解决了 react 组件模板过多的问题，大幅减少了代码量，但是在复杂组件中与 class 模式相比代码相对难以维护

优点

简单易用
不依靠 react 版本
适合 ui 组件开发(0 外部依赖)

缺点

代码冗余且丑陋
state 和 prop 逻辑冲突
state 入门容易，用好很难

context

简单方便上下文, 多层组件不用重复传递 prop

优点

简单易用
适合 ui 组件开发(0 外部依赖)
避免多层组件重复传参

缺点

react 官方不推荐新手使用
更新 context 会导致全局重新渲染，性能堪忧

Redux

最接近官方标准状态库的 Redux 是绝大部分 react 开发者首推的状态库

优点

逻辑清晰，结构分层合理
性能很好(前提要有优化)

缺点

学习曲线过高，难以学习
绝大部分项目没有必要使用
单数据中心

mobx

react 是单向数据流，如果使用了 mobx，mobx+react 就变成双向数据流。

当 react 不允许使用 setState 时，其实就是双向数据流

优点

简单，快速，优雅
默认性能很好
mobx 与 react 非强关联, 可与任意其他框架配合

缺点

使用 Proxy, 非简单 object, 与 vue 类似
在 react 生态圈相对冷门
虽然默认性能优秀，但难以优化极致

mobx 与 redux 相比, mobx 像自动挡汽车简单高效 redux 是手动挡汽车有乐趣且极致。

apollo

我唯一没有使用过的状态库, 因为 apollo 适合于 graphql 后端形式，非 graphql 形式无法体现优点

recoil

近期开源的状态管理框架，默认支持 react concurrent mode，与 mobx 十分相似，依然处于初期开发中

个人较看好 mobx 类型双向绑定状态库, 其能大幅提高开发效率

优点

极简 api, 5 分钟记忆所有 api
默认性能很好
支持 concurrent mode
facebook 官方状态库

缺点

仍然在早期开发中，不稳定
最低支持 react v6.13+ , 兼容性差

Reference

git clone不包含.git文件

Sat, 06 Jun 2020 00:00:00 GMT

背景

我需要从 git 下载一个模板, 但是又不像要.git 文件。

usage

git 本身不支持该功能，但是可以通过 rm 手动移除

git clone --depth=1 --branch=master git://someserver/somerepo myTemplate
rm -rf ./myTemplate/.git

--depth=1 --branch=master 不是必须的但是可以尽量减少下载的内容量

我作为新人中小型公司与大公司的区别

Tue, 19 May 2020 00:00:00 GMT

我作为新人对中小型公司与大公司的区别

背景: 最近由于职业发展来到了一家一线的互联网公司, 入职 1 个月，给我的总体感受是压力山大,真正的挑战与机遇并存。

我在老东家要做的事情

早 9 晚 6，固定双休，0 加班
编码，每天平均大概 2 小时
技术自由建设，只服务我个人

我在新东家要做的事情

早 9 晚 9，固定双休
白天开会，晚上编码
轮子已经完善，开箱即用

相较于老东家，新东家每天都是忙忙碌碌的。工作都是充实的，业务压力山大。挑战与机遇并存

Reference

TextEncode 和 TextDecode 使用和介绍

Thu, 23 Apr 2020 00:00:00 GMT

背景

最近遇到一个线上解码 bug, 默认的 String.fromCharCode 转码乱码，初步查明原因是因为 String.fromCharCode仅支持utf-16编码，而我们使用的底层库返回的为utf-8(unit8Array)数据

解决办法

使用实验阶段的 Encoding API

var uint8array = new TextEncoder('utf-8').encode('¢')
var string = new TextDecoder('utf-8').decode(uint8array)

Encoding API处于实验阶段, ie 浏览器需要使用 polyfill

Reference

git 恢复被删除的文件

Mon, 30 Mar 2020 00:00:00 GMT

背景

我需要回滚在许久之前被废弃的模块。

usage

通过 git GUI 很难查看一个被删除文件/目录的 git 历史记录，故只能使用命令行

这应该是极少遇到的情况

git log -- [deleted-fileName]

然后就可以通过 gui 回滚对应文件

个人更倾向于使用 GUI 操作 git, 因为对我而言, GUI 更精准且易用。但是 GUI 只能适用于大多数场景，特殊场景只能用命令行解决。另外，我不惧怕深入一样东西, 前提是是否值得。

Reference

homebrew 作弊码

Fri, 27 Mar 2020 00:00:00 GMT

homebrew 常用命令集合

Commands

Command	Description
`brew install git`	Install a package
`brew uninstall git`	Remove/Uninstall a package
`brew upgrade git`	Upgrade a package
---	---
`brew unlink git`	Unlink
`brew link git`	Link
`brew switch git 2.5.0`	Change versions
---	---
`brew list --versions git`	See what versions you have

More package commands

Command	Description
`brew info git`	List versions, caveats, etc
`brew cleanup git`	Remove old versions
`brew edit git`	Edit this formula
`brew cat git`	Print this formula
`brew home git`	Open homepage
`brew search git`	Search for formulas

Global commands

Command	Description
`brew update`	Update brew and cask
`brew list`	List installed
`brew outdated`	What’s due for upgrades?
`brew doctor`	Diagnose brew issues

Brew Cask commands

Command	Description
`brew cask install firefox`	Install the Firefox browser
`brew cask list`	List installed applications

Cask commands are used for interacting with graphical applications.

Reference

homebrew FAQ

Intersection Observer API

Thu, 26 Mar 2020 00:00:00 GMT

在 mogul 实现image 组件懒加载图片时, 第一次接触到该 API, 当时由于开发紧张，故没有深入研究，现在有点空余时间，深入研究一下

Intersection Observer API 用途

图片,内容懒加载
窗口无限滚动(当滚动到页面底部时, 自动加载更多资源,实现无限滚动)

以前我通常使用监听滚动时间, 然后基于 document.body.scrollHeight 和 document.body.scrollTop 综合判定是否需要加载更多资源 react 大量窗口化技术库中，依然使用监听滚动时间来实现的
用户行为分析(埋点)

用法

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0,
}

let observer = new IntersectionObserver(callback, options)

observer.observe(element)

root一般无需指定，默认为 document.body(browser viewport)

threshold 是周期频率的意思, 1 表明 callback 在元素完全显示时被执行，0 表示元素刚出现时被执行，若为数组, 则满足条件的情况下执行

examples

20 行代码实现 React 的图片懒加载功能

let options = {  rootMargin: '0px',  threshold: 0,}function loadImage(entries) {  entries.forEach(entry => {    if (entry.isIntersecting && !entry.target.getAttribute('src')) {      entry.target.setAttribute(        'src',        entry.target.getAttribute('data-lazy-src')      )    }  })}let observer = new IntersectionObserver(loadImage, options)function Image({ src }) {
  let image = useRef()

  useEffect(() => {
    observer.observe(image.current)  }, [])

  return (
    <div className={`img_container`}>
      <img ref={image} className={`img`} alt={`img`} data-lazy-src={src} />
    </div>
  )
}

export default function App() {
  return (
    <div className="App">
      <h1>图片懒加载</h1>
      <h2>向下滚动加载图片!</h2>
      <div style={{ marginBottom: 1000 }} />
      <Image
        src={
          'http://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&f=JPEG?w=4611&h=2969'
        }
      />
    </div>
  )
}

在 codesandbox 中打开

相比于监听 window.scroll 事件, 是不是更简单, 更高大上？

Reference

MDN:Intersection Observer API

前端性能优化之Map Set

Fri, 13 Mar 2020 00:00:00 GMT

背景

前端业务系统遇到性能问题主要有 3 种

网络请求过多
dom 滥用
Big O notation 数组循环算法过多

本文主要解决 Big O notation 问题

另外 2 种情况 网络请求过多, dom滥用 的问题，我会另外写一篇文章总结

在实际业务中, 往往从服务端获取的数据不是真正 UI 想要的，故必须对数据进行一个操作(过滤，排序，格式化等)。然而, UI 又会随着业务的发展不断变化，这会导致需要不断的迭代数据操作的逻辑，使得操作逻辑越来越复杂。当操作的数据量达到一定程度时, 页面出现假死的现象，这就出现了前端性能问题。

而解决这个性能问题的核心关键，就是建立数据缓存(索引)

将复杂度 O(n*m) 转换为 O(n+m)

例如如下例子:

let data = new Array(1000).fill().map( (d,index) => ({
    money: Math.ceil(Math.random() * 100),
    id: index + 1
}) );
// 求和
let sum = data.reduce( (curr, ({ money })) => curr + money ,0 )

// 寻找id为10的金额
let target = data.find( ({ id })) => id === 10 )

// 删除id为10的账户金额
let filterData = data.filter( ({ id })) => id === 10 )

// 更新数据
let newData = [{ id: 1, money: 20 }, { id: 2, money: 10 }, { id: 3, money: 30 }];
// 若想实现更新数据, 那么如下算法性能消费极大
// 复杂度 O(n*m)
data.map( d => {
    let target = newData.find( ({ id,money }) => {
        return d.id === id;
    })

    if(target){
        return target;
    } else {
        return d
    }
} )

解决方案就是使用 Map 和 Set

Map

es6 Map 主要用于频繁性更新, 修改的操作

let data = new Array(1000).fill().map((d, index) => ({
  money: Math.ceil(Math.random() * 100),
  id: index + 1,
}))

let dataMap = data.reduce((map, d) => {
  map.set(d.id, d)
  return map
}, new Map())

// 更新数据
let newData = [{ id: 1, money: 20 }, { id: 2, money: 10 }, { id: 3, money: 30 }]
// 复杂度 O(n+m)
newData.forEach(d => {
  dataMap.set(d.id, d)
})

使用 Map 的场景

Map 的 key 可以使用任意类型, 例如 string,number, symbol, 甚至 object , 故适用于 key 未知的场景

map.get("1") !== map.get(1); 获取的不是同一个值！
Map 保留加入的顺序，且顺序不可更改（该特性有利且有弊）
Map 更纯净, 不会包含额外的 object 方法

使用 object 场景

需要数据序列化(json.stringify)
固定 key 类型(string)
简单数据结构, 无需频繁添加删除 key

Set

Set 与 Array 的主要区别在于, Set 不允许重复, 是一种更严格的 array

Set 使用 === 判断是否一致

Set 相较于 Map 实际应用场景较少，没有太大的优势。在实际业务中，一般用于排重

let arr = ['😁', 'a', 'b', 'c', '😁', 'a']

Array.from(new Set(arr)) // ["😁","a", "b", "c" ]

Set 相较于 Array 性能稍差，同理 Map 相较于 object 性能稍差。但是正常使用没有多大区别。因为这些性能只能算是线性的 O(n+m)，而不是 O(n*m)。个人见解: 解决 O(n+m)的问题，需要是解决网络请求或者 dom 滥用!

参考资料:

线框图软件Balsamiq介绍

Mon, 24 Feb 2020 00:00:00 GMT

背景

wireframes中文为线框图。线框图主要用于页面框架设计, 完成具体目的

Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea.

wireframes 的主要功能有

早期网站界面设计
头脑风暴
功能可行性设计

Balsamiq就是其中一款领域聚焦软件

优点

个人总结其优势主要有:

低保真（设计者不用拘泥于像素级别的细节，而是注重可行性）
相较于 ps、 sketch, 快捷方便,易于上手

We’re great for non-technical folks: you will be able to master our tool in minutes! —来自 Balsamiq 官网
大量默认组件, 上手即用
更适合程序员
演示模式
团队分享 jira 集成(但收费)
导出功能完善(pdf, 图片)

缺点

收费不低, 89 美金，和 sketch 差不多
mac 下程序不稳定, 经常莫名其妙崩溃，其他平台未测试
团队分享功能薄弱, 第三方集成很少，且仅有的集成也是收费的

Reference

website wireframes: wiki 定义

为什么我选择react作为我第一优先前端框架

Wed, 29 Jan 2020 00:00:00 GMT

过年在家，闲来无事，总结一下我为什么使用 react 的原因。

背景

起初, 使用 react 的原因很简单：公司项目需要迭代, 原有技术(jquery)已无法满足需求, 故需要切换为更现代的框架技术(angular, react, vue, knockout)。由于小公司，没有能力做不同框架之间的调研，只能通过查询科技新闻(2015)，选择了 react。现在回想起来, 盲选的结果不错。

现在个人认为: 重大核心技术选择, 需要以大厂、开源、Do One Thing and Do It Well(只做一件事)优先。

一下是我整理我认为的 react 优点

强大的社区，稳定的维护

相较于 vue, 国内社区不如 vue, 但是除开国内, react 依然是当下第一前端框架。同时, 维护者和 angular 类似，都是顶级大厂。

强大的社区保证无需重复制造轮子，能够让开发者关注公司业务，项目本身

大厂出品非常重要，在技术转型初期，没人能确保成功。但是, 大厂起码能保证不差，且更容易获得上级的肯定

声明式编程

我个人认为JSX是 react 最大的特点, 我提供统一的 web 组件定义方式, 解决了之前不同框架，不同类库千奇百怪的 api 调用方式

平衡前沿稳定的前端发展

react 在前沿与稳定 2 个矛盾点做了不错的平衡

前沿

react 拥有自己独创的 ui 算法, 在 2020 年依然属于较新技术。由于仅仅是 UI 库, 可以更好的和第三方类似组成自己定制的前端框架，做到高度个性化

稳定

稳定性也是其他框架无法比拟的。

react v16 版本从 17 年底发布, 保证 100%向下兼容

周边类库依然保持高度稳定(react-dom 100%与任意版本 react 兼容)，(redux 与 react v16 以上兼容)， (mobx 与 react v16 兼容)

react 谨慎对待 api 的设计：熟悉 react 的人会知道他内部会暴露大量unstable_开头的方法，这些方法因为未有更好的实现方式，故使用 unstable 告诉开发者请谨慎使用

精通 react 也是一种学习过程

前端不仅仅只有 react, 他只是 ui 的一部分。作为一个出色的前端，应该要掌握更多的地方。相较于 angular, vue, jquery, 他更让开发者不由自主的学习更多领域的知识。

react 有更高的学习曲线
react 需要使用者自己决定使用哪些技术栈
react 遵循Do One Thing and Do It Well原则
react 更贴近原生

根据我认识的许多前端，通常来说，平均水平使用 react 的优于其他技术栈的

另外, 世界上不存在一种前端框架能够永存, javascript 才是永存的。故这也是 react 带来的优势

Reference

Unix philosophy: Do One Thing and Do It Well

我为何使用typescript

Wed, 15 Jan 2020 00:00:00 GMT

背景

我最终打算将我的项目慢慢向 typescript 迁移了，不是因为原生 javascript 不好，而是遇到了其无法解决的问题。如下是我总结的原因

手写文档太痛苦

我当前使用手动写d.ts文件来实现客户端代码的自动补全和提示, 这种方式不论在 webstorm, 还是 vscode,效果相当不错。起初，这没有什么问题。但是随着版本的迭代, 我发现如若修改一点点的内容，我必须手动去修改相关文档。而这原因导致我多次重新发布版本。故我希望将文档和代码合并, typescript 能够很完美的解决这个问题

个人认为: 手动写 d.ts, 虽然会存在遗漏功能，写法不准确上有不妥。但是，内容一定是可读性高，特别适合内部团队使用(因为有统一的风格约定)

为何不使用 jsdoc 将文档和代码合并 ? jsdoc 是一个简易的方案，且绝大部分开发者都能理解文档的内容。但为了让第三方使用依然无法避免写d.ts ，又需要我们同时维护 2 份代码

更好的重构代码

在项目刚开始开发时，需求不稳定, 但是随着约 2 年的开发，大致内容已经固定，但是又面对了向下兼容的风险。传统 js 使用测试来保证向下兼容。但是使用测试不能够满足多变的 ui 框架,且接近 100%测试覆盖率极难且费时费力。故使用 typescript 能够帮我大幅减轻重构代码时的风险。

在传统业务代码中，我依然推荐首选 javascript, 若项目为多人合作前端工程，可以选择 typescript.

typescript 不是下一个 coffee script

早在, 16 年我就关注 typescript, 但是迟迟不愿意学习。一个很大的原因, 我怕他是下一个 coffee script。coffee script 相对于 javascript 拥有简洁的语法, 深受资深前端的喜爱，但始终属于小众语言。 typescript 重点解决 javascript 静态类型检测功能，同年, flow 也是解决类似问题。但是这要求开发者学习新的 type 语法。另外, es6, es7 开始流行, 代码可读性已经大幅提高。故我放弃了学习 typescript。

另一个很重要的原因, typescript 来自微软, 故当时我个人更愿意学习 flow 而不是 typescript

但是, 时代在变化, 已经很明显, 静态类型检测对 javascript 很重要, typescript 将来会成为一种趋势。我个人认为 typescript 会是未来 5 年前端趋势之一。

SSH登录不用密码之使用私钥登陆

Thu, 19 Dec 2019 00:00:00 GMT

背景

在现代持续构建系统中, 都是使用私钥登陆。最近在使用这种方式登录时, 遇到无法登录的情况。最后了解原因是自己对 ssh 理解不够所致。

重现方式

这这篇外网的资料中有完整的教程，如何使用私钥登陆,如何您在一台全新机器中使用 ssh-keygen生成 ssh 私钥, 然后按照上述教程操作，你会发现无法登陆服务器。

troubleshot

起初, 我认为 ssh 使用私钥登陆 linux 时, 只要与服务器的 .ssh/id_rsa 的私钥一致即可访问服务器。但是实际情况是无法登录。这是因为服务端只会读取authorized_keys文件中的密钥, 与之匹配才能登陆, 所以, 需要将当前 .ssh/id_rsa.pub 中的内容加入authorized_keys文件中。这样才能继续登陆。

docker compose cheatsheet

Fri, 06 Dec 2019 00:00:00 GMT

个人 docker-compose 笔记

Basic config example

# docker-compose.yml
version: '3'

services:
  web:
    build: .
    # build from Dockerfile
    context: ./Path
    dockerfile: Dockerfile
    ports:
      - '5000:5000'
    volumes:
      - .:/code
  redis:
    image: redis

Common commands

# Starts existing containers for a service.
docker-compose start

# Stops running containers without removing them.
docker-compose stop

# Pauses running containers of a service.
docker-compose pause

# Unpauses paused containers of a service.
docker-compose unpause

# Lists containers.
docker-compose ps

# Builds, (re)creates, starts, and attaches to containers for a service.
docker-compose up

# Stops containers and removes containers, networks, volumes, and images created by up.
docker-compose down

Config file reference

Building

web:
  # build from Dockerfile
  build: .
  # build from custom Dockerfile
  build:
    context: ./dir
    dockerfile: Dockerfile.dev
  # build from image
  image: ubuntu
  image: ubuntu:14.04
  image: tutum/influxdb
  image: example-registry:4000/postgresql
  image: a4bc65fd

Ports

ports:
  - '3000'
  - '8000:80' # guest:host
# expose ports to linked services (not to host)
expose: ['3000']

Commands

# command to execute
command: bundle exec thin -p 3000
command: [bundle, exec, thin, -p, 3000]

# override the entrypoint
entrypoint: /app/start.sh
entrypoint: [php, -d, vendor/bin/phpunit]

Environment variables

# environment vars
environment:
  RACK_ENV: development
environment:
  - RACK_ENV=development

# environment vars from file
env_file: .env
env_file: [.env, .development.env]

Dependencies

# makes the `db` service available as the hostname `database`
# (implies depends_on)
links:
  - db:database
  - redis

# make sure `db` is alive before starting
depends_on:
  - db

Other options

# make this service extend another
extends:
  file: common.yml # optional
  service: webapp
volumes:
  - /var/lib/mysql
  - ./_data:/var/lib/mysql

Advanced features

Labels

services:
  web:
    labels:
      com.example.description: 'Accounting web app'

DNS servers

services:
  web:
    dns: 8.8.8.8
    dns:
      - 8.8.8.8
      - 8.8.4.4

Devices

services:
  web:
    devices:
      - '/dev/ttyUSB0:/dev/ttyUSB0'

External links

services:
  web:
    external_links:
      - redis_1
      - project_db_1:mysql

Hosts

services:
  web:
    extra_hosts:
      - 'somehost:192.168.1.100'

Network

# creates a custom network called `frontend`
networks: frontend:

External network

# join a preexisting network
networks:
  default:
    external:
      name: frontend

References

Based off cheatsheet from https://devhints.io/docker-compose.

API keys vs OAuth vs Jwt

Tue, 26 Nov 2019 00:00:00 GMT

API keys vs OAuth vs Jwt

API Keys: 适用于开发者快速开发

早先在现代 API 中, 只有 API Keys。 API Keys 是所有实现中最简单的。你只要登录你的服务，找到 API Keys, 接下来就是超级管理员了。

OAuth Tokens: 适用于获取用户数据

OAuth 不需要用户登录服务中获取当前的 API Keys, 用户只要使用现有的账号登录即可。例如使用 Google 账号登录 Postman, 使用微信授权登录等。当用户完成授权, 服务开发端将授权信息保存在服务中, 供之后使用。

个人见解: OAuth 只适用于获取个人用户信息, 但是本身无法保存额外的信息, 故需要配合 jwt 使用。

Jwt: 适用于权限的混合设置

Jwt能够保存任意的信息, 其行为和 cookie 类似。但是 cookie 是默认自动跟随的, 而 jwt 必须手动设置

在前端交互中, 通常 API key 存储在如下位置

Authorization Header: Authorization: Apikey 1234567890abcdef
Basic Auth
Body Data
Custom Header:
Query String:

Authorization Header && Basic Auth

放在请求头Authorization中是较官方的设置, 大多数开源服务都是使用这种方式.缺点是兼容性较差，一些老旧的服务供应无法支持读取请求头 Basic Auth是Authorization的一种, 使用Basic算法进行加密, 更多可见

Custom Header

自定义头适用于内部系统, 我当前公司就使用自定义头, 优势和Authorization Header一致

Body Data

将 token 放入 Body 中不适用于get, head等请求, 所以通常需要和Query String方式结合使用。

Query String

将 token 方式 query 中, 这是兼容性最好的一种方式, 但是这会暴露 token(连君子都能看见了)、url 特别长等问题

Reference

API keys vs OAuth vs Jwt

HTTP HEADER 之 ORIGIN 深入理解

Tue, 15 Oct 2019 00:00:00 GMT

背景

最近在做一个服务集成的项目，需要将一个第三方的日志服务系统直接接入我们现有的日志系统中，第三方服务支持Bearer授权访问，故最后解决方案是前端直接调用第三方服务获取数据。但是遇到了鉴权的问题, 最后获知是Origin导致的

Origin 的来源和作用

经查询资料, Origin是Referer头的升级版, 常用于CORS或者非GET、HEAD请求(MDN 的说法有误，不是只有 POST)相关的服务端身份检验

个人觉得，这个 Origin 头绝大部分都用于 CORS

FAQ

浏览器端Origin无法手动设置

Origin头是浏览器保护字段，类似的有 Referer、Host、Content-Length、Keep-alive等，但是可以通过 nginx 代理修改。浏览器根据约定自动附加

浏览器附加Origin头的规则

根据fetch说明, 只有当请求为跨域请求或者非get,head请求时都会自动附加。不可被编程，不可被编辑。get,head请求由于兼容性，故无法实现

非 CORS 情况下, Origin字段框架使用情况

据我了解, 绝大部分框架都没有使用 Origin 字段, 我所待的几个公司也从未根据此值来判断

所有符合规则的资源都会包含 Origin 头?

不是。例如跨域图片不会包含 Origin 头, 更多资源请查看

Hack CORS

浏览器执行 CORS(跨域请求)时都会发送一个options请求，获取服务端是否允许跨域的参数。这是为了安全性考虑的。有些情况我们无法控制服务端的行为，故只能想办法绕过验证。

本地开发: 使用node-http-proxy代理服务请求
生产/本地开发: 使用 nginx 代理服务, 例如

location ~ ^\/(scholar_complete)\/* {
    proxy_pass https://scholar.google.com/;
}

这会将所有/scholar_complete开头的请求转发到 Google Scholar(谷歌学术)。

jsonp是一种较老的方式, 现在基本不考虑了。

Reference

前端单元测验 TDD Vs BDD

Thu, 26 Sep 2019 00:00:00 GMT

背景

最近手头项目不多，抽空将公司底层的一些代码重构了一下，试着想要加入单元测试(unit test)，之前总听大神说单元测试多么好，但是一直没空了解。当前总共有 2 中测试模式, TDD 和 BDD，这里总结一下他们之间的优势和缺点。

TDD

TDD(Test-driven development): 追求先写测试然后再写代码，所有代码为了通过测试而生。

TDD流程图

优势

整个代码基于测试编写

非常高的测试通过覆盖率: 整个代码基于测试编写(这能不高吗?(😂))
测试用例即开发文档: 维护者或者代码 reviewer 甚至可以仅仅通过测试用例就能判定出是否符合功能需求
更易于重构: 编写测试的优点是易于重构，TDD 将这优势放大，维护者必须先写测试用例，然后编写对应的代码，更有利于流程的控制(理清开发思路)
适用于底层工具开发: 底层工具面向技术设计，和TDD 设计原则一致(TDD encourages simple designs and inspires confidence)。

缺点

过于死板，缺少灵活性，限制大，偏业务项目少用

时间翻倍效率减半: 时间就是金钱, 在开发(尤其是业务逻辑)功能时，开发时间翻倍意味着绩效减半。
重构时间翻倍: 敏捷开发需求迭代更新快，不适合灵活多变的代码
对新人不友好: 需要熟悉先写测试，在写代码，测试成了需求文档(而不是真正的原型设计)
不适用于重度 css/html 项目: 前端测试对 css/html 测试难度极大(一般都不写的)，更何况要先写测试用例。这会导致代码覆盖率降低

BDD

BDD(Behaviour-Driven Development): 设定一个目标(可以是先编写测试，也可以先写代码)，只求内容与预期一致，不追求如何实现。

BDD流程图

个人见解：BDD 开发面向业务。BDD 开发其实可以与 TDD 同时进行，是 TDD 的子集。完美的 BDD= TDD

优势

灵活性好，更好的开发体验

面向业务: 前端项目绝大部分是基于业务的，更适合 BDD
开发效率高,渐进式开发: 可以先编写代码，然后再写测试，在项目时间紧张的时候，可以简化(暂缓，不写)测试用例(事后补齐)
项目经理的文档: 这些人员不关心实现细节，BDD 使用它们能够看懂的术语进行测试，能够提高对开发者的专业认可。

缺点

较低代码覆盖度，测试用例为附属品

代码覆盖度低：纯业务逻辑的话，覆盖率会不错。但是如果包含工具方法，覆盖率会直线走低。
结果导向，忽略代码质量: BDD 面向结果，代码质量跟开发者水平息息相关，很难纠正不良的开发习惯

结论

个人认为: 相对于其他主流编程语言来说，单元测试重要性相对较低，这是跟语言特性相关的。javascript 语言本身重视灵活多变，动态，跨平台(依赖不同渲染引擎),写法千奇百怪(在 es6 之前)，这一切变得难以测试。但是测试依然是重要的，但是不是必须的

单元测试能够理清开发思路，更好的重构代码
BDD 测试更适合偏业务(轻底层)的风格
使用代码证明你的项目质量可靠(talk is cheap, show your code)

但是, 时间是有限的，所以个人建议只对核心的功能进行测试。

Reference

react生态圈介绍(内部演讲)

Wed, 18 Sep 2019 00:00:00 GMT

内部演讲 ppt: https://slides.com/zhangqing/react-introduce/live

node require 规则详解

Mon, 19 Aug 2019 00:00:00 GMT

在 es6 import 在 babel 转换后会变成 node 的 require。这点大家都知道。同时, 大家对 required 的机制只有大致了解。例如, require("jquery"), 会获取 node_modules 下的 jquery。但是获取的具体规则却不是很了解。

require 规则

resolve 规则

如何解析路径的规则

require(X) from module at path Y

X 是核心模块(core modules)

如果 X 是核心模块, 例如 fs, path, 那么直接返回核心模块

const fs = require('fs')

X 是第三方模块(thrid party modules)

本地模块指安装的依赖, 一般位于 node_modules 目录

如果 X 是第三方模块, 例如 react, axios, jquery, 那么直接返回该模块

const axios = require('axios')

X 以 `/`开始

如果 X 是绝对路径, 那么从 filesystem root 开始寻找模块

X 以 `./` 或者 `../` 相对路径

从当前文件计算相对路径获取模块

加载规则

如何加载文件的规则

加载对象为文件

1. If X is a file, load X as JavaScript text.  STOP
2. If X.js is a file, load X.js as JavaScript text.  STOP
3. If X.json is a file, parse X.json to a JavaScript Object.  STOP
4. If X.node is a file, load X.node as binary addon.  STOP

一句话就是 X > X.js > X.json > X.node

加载对象为目录

LOAD_INDEX(X)
1. If X/index.js is a file, load X/index.js as JavaScript text.  STOP
2. If X/index.json is a file, parse X/index.json to a JavaScript object. STOP
3. If X/index.node is a file, load X/index.node as binary addon.  STOP

LOAD_AS_DIRECTORY(X)
1. If X/package.json is a file,
   a. Parse X/package.json, and look for "main" field.
   b. If "main" is a falsy value, GOTO 2.
   c. let M = X + (json main field)
   d. LOAD_AS_FILE(M)
   e. LOAD_INDEX(M)
   f. LOAD_INDEX(X) DEPRECATED
   g. THROW "not found"
2. LOAD_INDEX(X)

简单来说就是优先查看 package.json, 检测 main 字段, 如果存在,使用上方加载文件逻辑, 不存在使用 LOAD_INDEX 方法

node_modules 解析规则

LOAD_NODE_MODULES(X, START)
1. let DIRS = NODE_MODULES_PATHS(START)
2. for each DIR in DIRS:
   a. LOAD_AS_FILE(DIR/X)
   b. LOAD_AS_DIRECTORY(DIR/X)

NODE_MODULES_PATHS(START)
1. let PARTS = path split(START)
2. let I = count of PARTS - 1
3. let DIRS = [GLOBAL_FOLDERS]
4. while I >= 0,
   a. if PARTS[I] = "node_modules" CONTINUE
   b. DIR = path join(PARTS[0 .. I] + "node_modules")
   c. DIRS = DIRS + DIR
   d. let I = I - 1
5. return DIRS

Reference

node modules： node modules 文档

es7 proxy 用法笔记

Tue, 13 Aug 2019 00:00:00 GMT

es7 的 Proxy 虽然问世很久了, 但是在实际业务开发中很少使用。对他一直了解很少。这次通过深入了解响应式编程,顺便深入学习一下 Proxy。 Proxy 主要用于控制一个对象变量的增删改查的行为(取值, 赋值, 枚举, 方法调用等)

Proxy不推荐在常规业务代码中使用

usage

let proxy = new Proxy(target, handler)

target: 监听的对应, 通常是一个 object 对象
handler: 相关traps(陷阱)集合, 类似于 React 中的生命周期

traps 有很多相关方法, 精力有限不能一一讲解，主要解释一下响应式编程需要用到的几个

traps

get

用于获取对象的键值, 在响应式编程中, 通常需要在该方法中将监听的值加入当前的监听依赖之中

{
  get(self, key) {
    // Avoid observing inherited keys.
    if (self.hasOwnProperty(key)) {
      // TODO 添加当前的值引用到依赖之中
    }
    return self[key];
  }
}

set

用于设置对象的值, 在响应式编程中, 会执行该引用所有依赖的订阅

{
  set: function(self, key, value) {
    let existValue = self.hasOwnProperty(key);
    let originalValue = self[key];
    self[key] = value;
    if (!existValue) {
      // TODO 这是一个添加操作

    } else if (originalValue !== value) {
      // TODO 这是一个添加操作

    }

    // 这里表明修改成功
    // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set#Return_value
    return true;
  }
}

has

has用于in操作

const handler1 = {
  has(target, key) {
    if (key[0] === '_') {
      return false
    }
    return key in target
  },
}

const monster1 = {
  _secret: 'easily scared',
  eyeCount: 4,
}

const proxy1 = new Proxy(monster1, handler1)
console.log('eyeCount' in proxy1)
// expected output: true

console.log('_secret' in proxy1)
// expected output: false

console.log('_secret' in monster1)
// expected output: true

preventExtensions

Reference

MDN Proxy

nginx 自定义 header

Tue, 16 Jul 2019 00:00:00 GMT

最近在做一个内部工具项目时，需要前端根据情况请求不同接口地址, 但是后端接口不支持跨域访问，故只能通过 nginx 代理

nginx 配置

server {
    listen 8080;
    server_name  localhost;

    underscores_in_headers on;

    location ~ ^\/(monitorapi|monitor-login)\/* {
        proxy_pass $http_monitor_proxy_api;
    }
}

underscores_in_headers on;必须启用， nginx 会读取自定义 header

monitor_proxy_api 在 ajax 请求中, 只要携带请求头 monitor_proxy_api 即可将其值代理

Reference

nginx-passing-back-custom-header

常见 nginx proxy location 配置笔记

Thu, 13 Jun 2019 00:00:00 GMT

nginx 是前端常用的服务器, 配置 location 是一项必须掌握的技能。如下是我整理的一些常用 location 常用配置

单页面配置

location / {
    root /path/to/public
    try_files $uri $uri/ /index.html;
}

proxy location

nginx location 共有 [ = | ~ | ~* | ^~ ] 可选前缀方式。

假如有如下配置

location = / {
    [ configuration A ]
}

location / {
    [ configuration B ]
}

location /documents/ {
    [ configuration C ]
}

location ^~ /images/ {
    [ configuration D ]
}

location ~* \.(gif|jpg|jpeg)$ {
    [ configuration E ]
}

如果没有任何 prefix, 当所有其他路由都不满足时，会执行配置B
=会使用严格模式,只有当请求为”/“时才访问A。并且其优先级最高
~*，~的区别为:~*是大小写不敏感(case-insensitive), ~大小写敏感(case-sensitive), 由于一般服务都部署在 linux 上, 故推荐使用~
^~: 会提升优先级, 首先匹配路由, 优先级会仅次于=。一经匹配, 遍不会使用其他路由。

只有~开头的方式才能使用正则表达式, ^~ 后面不能使用正则!

常用代理正则

匹配后缀 `gif，jpg, jpeg`

location ~* \.(gif|jpg|jpeg)$ {

}

匹配以 user,product 开头的所有请求

# 如果要求必须包含至少一个长度 使用 ~* ^\/(user|product)\/.+
location ~* ^\/(user|product)\/ {

}

Reference

主要npm scripts使用说明

Wed, 29 May 2019 00:00:00 GMT

背景

npm scripts存在很多脚本, 例如 npm publish, npm install/uninstall等等。但是 npm 还支持很多在 package.json 中定义的 hooks 脚本这里介绍一下常用的脚本

prepublishOnly

适用于执行 npm publish 之前, 你需要运行脚本, 例如构建代码

prepare

适用于执行 npm publish 或者 npm install, 我当前没有想到什么好的应用场景。

postpublish

用于 npm publish 执行之后,调用。例如推送代码到 git

install

用于 npm install 时, 执行某个脚本。例如安装 node-sass, 每次都会执行一段脚本

{
  "name": "node-sass",
  "version": "4.12.0",
  "libsass": "3.5.4",
  "scripts": {
    "coverage": "node scripts/coverage.js",
    "install": "node scripts/install.js",    "postinstall": "node scripts/build.js",
    "lint": "node_modules/.bin/eslint bin/node-sass lib scripts test",
    "test": "node_modules/.bin/mocha test/{*,**/**}.js",
    "build": "node scripts/build.js --force",
    "prepublish": "not-in-install && node scripts/prepublish.js || in-install"
  }
}

注意, 和 prepare 不同, install 只会执行于被安装的包中。

按照个人的经验, 尽量避免使用install, 因为这会导致很多不可预见的问题。

yarn 的 build fresh package 这一过程就是指执行 install 的脚本

自定义脚本

npm 也可以执行自定义的脚本, 例如

{
  "name": "my-pkg",
  "scripts": {
    "dev": "echo hello my-pkg"
  }
}

你可以使用npm run dev执行

最佳网站资源缓存实践

Thu, 16 May 2019 00:00:00 GMT

你也许注意到,有时我们访问网站, 也许会出现样式破裂, 或者报错的情况。通常, 导致这些问题的原因是错误的使用 cache control policy。以至于你无法获取最新部署的资源。这篇文章，我将要演示如何正确的设置缓存来帮助你的网站保持实时更新。

如果你只想要最终结果并使用它，你可以直接跳转到结论

缓存是如何工作的?

你的浏览器在每一次请求网站/资源时, 尽可能的从本地缓存中读取更多数据。这是唯一的方法让我们提供足够的说明告诉浏览器缓存哪些资源和缓存多久。

这些说明都是声明的; 你想要让浏览器使用你的说明, 你必须增加对应的 HTTP 头信息。这些通用的请求声明名分别是:

Cache-Control
Expires
Etag
Last-Modified

大多数的服务器都有一些缓存设置,但是对开发者来说无法很清晰的知道是否真的有缓存机制。

如果没有缓存机制, 浏览器会读取每一个请求的资源。这大幅度增加加载页面的时间, 同时, 也是增加服务器的压力。

无缓存请求

当服务器端没有设置缓存机制的话，这完全由浏览器决定是否缓存信息。当前, Chrome 和 Safari 每一次请求都会下载数据。不同平台这也许会有不同的行为。

为了更清晰的应对不同类型文件, 让我们深入了解缓存机制, 一步步添加到请求头中了解对应的结果。

Etag(Entity Tag)

Etag 是一种缓存设置。使用 Etag 是让浏览器知道相关资源是否有变动而不用下载整个文件。服务器端计算资源/文件的 hash 值,并把它发送给浏览器。当下次浏览器请求时, 浏览器不会先下载整个文件,而是发送一个（类）prefligt 请求,包含请求头如If-None-Match: W/“1d2e7–1648e509289。服务器端会检测是否根据当前的值找到文件,如果有不一样的，强制浏览器获取新文件。否则, 服务器端会通知浏览器使用缓存的文件。

第一次使用etag请求

第二次使用etag请求

当启用 Etag 缓存策略时, 我们总是让服务端检测文件是否存在,并且只有检测成功之后, 浏览器根据返回结果决定是否读取缓存或者是重新加载。当一个资源/文件没有被改动,只会额外产生 80-100 bytes 来验证是否变化，取而代之的是每次获取 10kb 的或者是 10mb 的文件。

Last Modified

另一种缓存方法时Last ModifiedHTTP 头。主要原理和 etag 十分相似,但是浏览器的行为有一点点的不一致。服务器端有一个时间戳记录每一个文件最后修改的时间。当一个文件第一次被下载之后, 浏览器需要查询文件是否被修改，浏览器会发送If-Modified-Since: Fri, 13 Jul 2018 10:49:23 GMT 请求头。如果资源/文件已经被修改了,那么浏览器会重新下载新文件，否则使用缓存的版本。

但是现实是浏览器都有自己的内部缓存机制, 并且自主决定是否重新下载资源(并不发送验证请求)

Last Modified是一种脆弱的缓存头, 每种浏览器基于自身的请求决定是否使用重新获取数据。 Google caching best practices guide

第一次使用Last Modified请求

第二次使用Last Modified请求(完美情况)

第二次使用Last Modified请求(一般情况)

所以, 我们不能依赖Last Modified，我个人更倾向于完全移除相关功能来减少网络请求，虽然这只需要几 bytes

Cache-Control max-age

这种缓存允许告诉浏览器需要缓存文件多久。浏览器缓存时间应该保存在文件头中, 这个一个通常的例子Cache-Control: max-age=31536000。使用这种策略，浏览器完全跳过请求服务器并且打开文件特别快。但是, 我们如何保证文件在这么长时间没有变化呢？我们不能！

所以, 强制让浏览器下载新文件版本，我们使用一种资源构建工具(assets builder tools),类似于 Webpack, Gulp。每一个文件将要被预编译到服务器并且获取其 hash 值。例如app-72420c47cc.css。再小的文件变化也会被映射到 hash 的变化。当每次发布, 你将要获取一个新的文件版本。这可以应用于所有的 css,js,和图片文件(max-age=31536000)。当我们发生变化, 浏览器都会重新获取一个新的资源，然后被缓存。

Cache-Control no-cache

最奇怪的部分是以上的技术,不能忘记你的 html 文件。如果你使用上面的办法,你从不会获取新的链接

备注: html 如果使用完全缓存max-age=31536000,那么永远都只会获得缓存中资源文件的地址，而不会获取新地址

我建议你对 html 文件使用 Cache-Control: no-cache。使用 no-cache并不意味着没有缓存, 它只是简单的告诉浏览器验证服务器端的资源。所以同时使用 etag 执行预请求获取文件是否有变动。

结论

最终设定

使用构建工具例如 Webpack, Gulp 对 css,js,image 文件做 hash 设定,例如app-67ce7f3483.css

对 js, css, images 文件，设置 Cache-Control: public, max-age=31536000, no Etag, no Last-Modified 设置
对 html 文件, 设置 Cache-Control: no-cache以及 Etag

备注： If there is a Cache-Control header with the max-age or s-maxage directive in the response, the Expires header is ignored.

Reference

git 移除 tracked的文件

Thu, 09 May 2019 00:00:00 GMT

问题描述

由于历史或者误操作原因, 可能很多人会将一些个人配置文件加入 git。后期优化代码时, 又将这些文件放入 .ignore中你会发现这些 ignore 的文件依然还会被 git 跟踪，故使用如下方法可以完美解决

git rm --cached <file>

例如 git rm --cached -r .idea: 它会将所有.idea 配置文件全部删除(不会删除实体文件,只是删除 git 缓存)

Reference

How to make Git “forget” about a file that was tracked but is now in .gitignore?

create-react-app 中 proxy 参数和 http-proxy-middleware 不一致

Mon, 29 Apr 2019 00:00:00 GMT

在研究 create-react-app 源码之中, 已经了解到其所用的 webpack-dev-server 插件内部使用 proxy-http-middleware 作为 proxy 工具, 但是最近遇到一个问题，行为表现和 proxy-http-middleware 不一致。经过研究, 最后整理如下

问题描述

存在如下代理

{
  "proxy": {
    "/A/": {
      "target": "http://www.baidu.com"
    },
    "/C/A": {
      "target": "http://www.google.com"
    }
  }
}

查询 http-proxy-middleware文档后,预期是这样的, 访问以

/A: 开头的请求都代理到http://www.baidu.com
/C/A: 开头的请求都代理到http://www.google.com

但是实际请求都会被代理到http://www.baidu.com。

create-react-app v2 已经不允许使用这种方式设置代理, 但是我们存在不少项目依然使用这种方式设置。详见

追踪问题

翻阅 create-react-app 源码, 发现其 context 是自定义的转发,

Object.assign({}, proxy[context], {
  context: function(pathname) {    // mayProxy 是检测是否为静态文件    // pathname.match(context) 检测是否代理    return mayProxy(pathname) && pathname.match(context)  },  onProxyReq: proxyReq => {
    // Browers may send Origin headers even with same-origin
    // requests. To prevent CORS issues, we have to change
    // the Origin to match the target URL.
    if (proxyReq.getHeader('origin')) {
      proxyReq.setHeader('origin', target)
    }
  },
  target,
  _context_: context,
  onError: onProxyError(target),
})

mayProxy(pathname) && pathname.match(context)并没有判断需要从开始判断, 故导致了上述问题

解决办法

在路由之前增加^标识, 这是 js 正则 pathname.match(context)

{
  "proxy": {
    "^/A/": {
      "target": "http://www.baidu.com"
    },
    "^/C/A": {
      "target": "http://www.google.com"
    }
  }
}

;`/C/A/search`.match(`/A`) //["/A", index: 2, input: "/C/A/search", groups: undefined]
;`/C/A/search`.match(`^/A`) // null

Reference

http-proxy-middleware

JSON vs YAML

Thu, 18 Apr 2019 00:00:00 GMT

最近一直在折腾构建, 遇到很多 yaml 配置文件。但是我对 yaml 不是很熟悉, 经过一些简单学习有了一些初步的个人见解, 如有不对, 请指正

YAML

YAML 在配置文件广泛的使用, 其主要优势

允许注释: yaml 相较于 json 最大的优势
self reference: 使用anchors实现
没有一堆无意思的标识符, 例如 {}, ", ,

JSON

JSON 格式在前端非常普遍, 它属于 YAML 的一个子集

serialization: 可序列化(这对 API 的传输很重要)
更简单的规则,且写法固定

个人观点

YAML 语法相对于 JSON 过于灵活, 这和 XML 语法相对于 JSON 过于繁琐, JSON 正好在其中间,获得一种最好的平衡

JSON 最大的缺点是无法使用评论, 一种解决办法就是使用 _comment 实现。另外一种办法, 前端已经广泛使用了, 那就是直接使用 js, 例如 webpack.config.js。

个人更倾向于JSON OVER YAML, 将来会有越来越多的工具支持 JSON 配置。因为前端更熟悉 JSON, 并且现阶段大量说明会另外使用文档来实现,不需要再 YAML 中设置。

但是, 现阶段很多工具依然使用 YAML, 还是得学习其语法 😭

Reference

JSON to YAML
Ansible: 一个学习 yaml 语法的网站

package.json中main,jsnext:main,module的区别

Fri, 12 Apr 2019 00:00:00 GMT

package.json 中存在一些特殊字段, main,jsnext:main,module 的区别。经常使用 npm 发布包时会用到他们。但很多人无法理解具体区别，故在此阐明。

main: main 字段指明包的入口文件位置,默认 index.js。这里的文件应该放置 commonJs(cjs)模块, 如果源码需要被编译才能使用,那么此处的文件就必须已经被编译了
jsnext:main: 有一些工具,例如 webpack 能直接处理 import方式导入的模块。如果开发者希望自己的包交由使用者决定如何引入,那么可以将源码编译成ECMA(esm)
module: 与 jsnext:main 意义一样。但是 jsnext:main 是社区约定的字段,并非官方。而 module 则是官方字段。但是社区包含大量的插件只认识 jsnext:main,所以推荐同时使用 jsnext:main 和 module

字段	描述	文件格式
main	nodejs 默认文件入口, 支持最广泛	cjs
jsnext:main	社区约定的 esm 文件入口, webpack, rollup 均支持该字段	esm
module	esm 官方约定入口, 支持插件较少,故推荐和 jsnext:main 同时使用	esm

最后, 用代码演示 cjs 和 esm 编译后代码的主要区别:

// CommonJS(cjs)
const { foo } = require('./bar')

const baz = foo + 'qux'

module.exports = {
  quux: [baz],
}

// ECMA module(esm)
import { foo } from './bar.js'

const baz = foo + 'qux'

export const quux = [baz]

React 也是一种 LLVM UI 框架(翻译)

Mon, 18 Mar 2019 00:00:00 GMT

LLVM是一组模块化和重用编译和工具链技术, LLVM 使得开发中能够简单的创造编程语言。

当我们首次见到React, 它介绍他是A JavaScript library for building user interfaces。当你深入了解其内部,React同样也可以被称为LLVM用来构建UI。它让开发中能够简单的构建声明式UI。

如果你问为什么你要使用声明式UI, 因为他更容易阅读,编写, 管理和测试，以及深度测试(100%单元测试), 手动管理更新UI是笨重和容易出错的, 但是类似于React的工具能够做的更好。

React一开始用于web开发, 但最近它的概念能够适用于更多的地方, 例如React Native构建IOS和安卓设备。我们也可以使用相同的组件风格构建不同平台的UI。

React有3种基本模块

React Component API: 提供组件API和生命周期
React-Reconciler: 它是React核心diff算法管理如何更新UI. Reconciler是真正方法的计算出当前UI的变化, 你可以阅读更多的 reconcilication的内容 https://reactjs.org/docs/reconciliation.html
React Renderer: 一个 renderer除了实现一些定义在React-Reconciler的方法,不做任何事情。 React-Reconciler 会执行这些定义的方法然后更新UI。如果你实现这些方法使用DOM API，那么目标就是web。如果你实现这些使用IOS UI Kit API, 那么目标就是IOS。如果你实现这些方法使用Andorid UI API, 目标就是Android。实际上, 如何支持UI的系统都可以使用React。它不需要使用React去绘制。这种抽象很疯狂。你可以查看这个有趣的视频 Ken Wheeler https://www.youtube.com/watch?v=PBpugV5l90c 他使用了一个自定义的renderer实现音乐组合。另外一个有趣的是 Dusten Kasten 的React Hardware

React-reconciler 在React v16时被完全重写为了更好的实现新的算法架构React Fiber。在那之前, React算法和dom紧紧相关。现在, 他可以更简单的编写自定义renderers。 React-reconciler API并不按照公共API那样, 他经常变动, 因为他总是需要进行优化。

你可以查看更多自定义renderers在下面这个链接中

https://github.com/chentsulin/awesome-react-renderer

快速安装 shadowsocks

Mon, 04 Mar 2019 00:00:00 GMT

背景

程序员学会翻墙是必备的技能之一, 但是这2年以来,vpn基本被封杀完了，所以只能自己动手使用shadowsocks搭建服务。

安装条件

1台可以访问google的linux服务器

安装

服务器端

yum install python-setuptools && easy_install pip
pip install git+https://github.com/shadowsocks/shadowsocks.git@master

我们使用配置文件启动

cd / && mkdir sss
vi config.json

然后写入如下内容

{
    "server":"0.0.0.0",
    "server_port":8388,
    "local_address": "127.0.0.1",
    "local_port":1080,
    "password":"mypassword",
    "timeout":300,
    "method":"aes-256-cfb",
    "fast_open": false
}

然后启动服务

ssserver -c /sss/config.json -d

启动服务 ssserver -c /sss/config.json -d start

停止服务 ssserver -c /sss/config.json -d stop

然后你的服务就安装完成了

客户端

安装对应操作系统下的客户端,以mac为例安装完成后, 打开服务器, 然后按照上方config.json配置中的内容，输入相关信息后, 即可访问google了

shadowsocks-perferences

费用

费用主要都是服务器端的租赁费用, 搬瓦工提供18.99美金/年的套餐, 相当实惠。我使用了香港的ecs服务器, 最低配，流量单独付费,总共5年570RMB，平均每年114RMB外加流量费(1元/gb)。

我主要翻墙查询一下技术文档, 看看youtube。刚统计了一下最近半年(2018-09-01~2019-03-01)的流量费用,总计余额从104元变为16元, 月均消费15元。加上服务器租赁费用, 总体还是比搬瓦工费用高的。

FAQ

租赁国内云服务, 如阿里云会不会被封ip

的确会被封。但是绝大部分情况, 你只要修改服务端口重启服务,即可。如果还是无法访问, 那么可以让阿里云进行全额退款,并重新换其他服务器。

最低配服务器性能够吗

个人使用,绝对够了。

和境外服务商比, 国内服务商的优点

访问速度快, youtube 1080p无压力。服务比国外厂商更好, 24小时工单。

会被请喝茶吗

我还没有😓

REFERENCE

shadowsocks: A fast tunnel proxy that helps you bypass firewalls.

nodejs 使用 import es7 语法

Fri, 01 Feb 2019 00:00:00 GMT

最近需要使用 Hapi 开发一些后端的相关东西, 但是 nodejs 的 require 让我很不爽, 故查询了一些办法能够直接使用 es7 import 语法目标: 在代码中使用 import path from "path"

使用的是前端思维, 不知道有没有其他更好的办法

require

nodejs: v8+
yarn/npm

安装

yarn add @babel/core @babel/polyfill @babel/register @babel/plugin-proposal-decorators @babel/preset-env --dev

@babel/core : babel 核心
@babel/polyfill : 一些语法的 polyfill
@babel/register : @babel/core 和 nodejs 桥接工具
@babel/preset-env : import语法就在这里面,外加一些其他的赠品(preset)
@babel/plugin-proposal-decorators : 装饰器

入口文件 index.js, 复制一下内容

'use strict'

require('@babel/polyfill')
require('@babel/register')({
  plugins: [
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true, // 必须这样设置, 否则装饰器会有一些限制, see https://babeljs.io/docs/en/babel-plugin-proposal-decorators#legacy
      },
    ],
  ],
  presets: ['@babel/preset-env'],})

module.exports = require('./app') // 替换成真正的文件入口;

如果还需要其他的语法, 和 babelrc的设置方式一致

注意, 如果项目根目录包含 babelrc文件, 建议删除

即可在其他文件使用 import

Reference

How To Enable ES6 Imports in Node.JS : 注意这篇文章使用的是 babel@6, babel@7 要用以上的方式
Using ES modules natively in Node.js : 原生使用 import, 但不够成熟

react ssr 服务器端渲染优点整理

Mon, 28 Jan 2019 00:00:00 GMT

背景

接触 react 差不多快 3 年了, 一直都是用的客户端渲染, 最新在做个人博客网站,所以对 react 服务端渲染进行了初步调研, 总结一下该何时使用 ssr

SEO: 搜索引擎优化
数据预处理页面: 例如个人博客, 门户首页, 产品宣传页面, 高访问量页面

SEO

众所周知, react 项目由纯 javascript 组成, 会导致搜索引擎无法爬取内容, 如果你的网站是以流量为主的, 那么这是致命的问题。所以必须在服务器端将网站初始化执行一次, 获取首屏内容, 使用react-helmet等库将网页关键词生成供搜索引擎的 index

数据预处理

加载基于 javascript 前端项目, 用户会先获取一个空的 html 文件(白页),然后等待一系类的 js,css,ajax 请求完成, 最后渲染页面。最完美的优化白页的方式就是服务器端渲染好页面, 然后使用加载动画(建议 css 级别的)实现资源加载。另外一种情况：新闻资讯网站。新闻资讯站点首页通常包含大量的类似请求, 可以将首屏渲染的结果渲染缓存, 当请求一致时, 直接返回结果。这样服务端可以避免重复接口请求,提供首页响应速度。

SSR 实现原理

通常, reactDom 中,客户端使用 render 方法渲染页面。服务器端使用 express 启动服务, 然后使用renderToString方法替换 index.html 页面中的内容。react 已经内置如何处理剩下来的逻辑了,用户不用为此特殊处理

import path from 'path'
import fs from 'fs'

import express from 'express'
import React from 'react'
import ReactDOMServer from 'react-dom/server'

import App from '../src/App'

const PORT = 9090
const app = express()

const router = express.Router()

const serverRenderer = (req, res, next) => {
  fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => {    if (err) {      console.error(err)      return res.status(500).send('An error occurred')    }    return res.send(      data.replace(        '<div id="root"></div>',        `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`      )    )  })}
router.use('^/$', serverRenderer)

router.use(
  express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' })
)

// tell the app to use the above rules
app.use(router)

// app.use(express.static('./build'))
app.listen(PORT, () => {
  console.log(`SSR running on port ${PORT}`)
})

实现框架

next.js: 写个人博客的时候，首先试用了 next.js, 但是 next.js 对 SEO 的处理依然不好, 而且存在性能问题(我的服务器只有 512mb 内存,如果在服务器端执行渲染,会严重影响机器性能)。
gatsby: 这是我最后的选择, gatsby 通过在构建时渲染页面, 这和 create-react-app 生成的结果完全一样, 不需要额外启动 node 服务器。最为一个非专业运维/后端, 这点很重要, 不需要处理你不擅长领域的内容。

如何选择框架

你认为 SEO 是最重要的

gatsby

数据预处理最关键, SEO 次之

next.js

以上都不是你考虑的, 或者当下你不用考虑

请使用 create-react-app, ssr 只会增加你的使用成本, 他不会给你带来其他的优势。

Examples

mini-react-ssr-demo: 使用 create-react-app 最简单实现 ssr

react-virtualized

Wed, 09 Jan 2019 00:00:00 GMT

前言

本文主要介绍 react-virtualized, 使用版本9.21.0

前端开发会遇到一种棘手的情况: 渲染大量数据。首先, 这种情况要分析是否可以避免, 大致有如下的方式:

服务端分页

减少一次返回的数据，前端可以使用列表或者表格的形式展现, 表格展示一般使用分页, 列表的话, 监听 onscroll 事件, 当快触底时, 加载更多数据
前端假分页

获取的数据也许是第三方的数据,没有提供切片相关的接口, 只能前端分页。适用方式和服务端很类似,表格和列表均可适用(列表使用有点会有点奇怪)
图表渲染

svg 图表转换成 canvas

数据聚合, zoom in/out。例如地图应用
windowing

windowing是 react 官方推荐的方法解决大数据渲染的办法, react-window是react-virtualized的阉割版,作者都是同一人

在使用之前

在使用 react-virtualized 之前,必须确认你是否真的需要它, 如果有可替换的方案, 我都建议优先使用替换方案。因为, 往往有更好的办法实现同样的需求, 它是最后的核武器了。

使用

windowing技术的核心就是 只渲染可视部分的内容

npm install react-virtualized --save

`List` Api 介绍

import { List } from "react-virtualized";
const data = [1,2,3,4,5];

<List
    // 窗口的高度,必填
    height={400}
    // 窗口的宽度,必填
    width={300}
    // 总共个数
    rowCount={data.length}
    // cell高度
    rowHeight={30}
    style={{ outline: "none" }}
    rowRenderer={({ key, index, isScrolling, style }) => {
        if(isScrolling){ return <div key={ key } style={ style }>滚动中...</div> }
        return <div key={ key } style={ style }>{ data[index] }</div>
    }}
</List>

这是最简单的使用,其中height,width必填,指明窗口的大小,你也可以使用AutoSizer实现动态宽高,查看这个例子,

rowCount是总数, 这是必填的。

rowRenderer是组件渲染, 其中 key,style字段必须设置给你的每一个 item, 你可以使用 data[index]获取你的数据, isScrolling表示当前是否正在滚动。

rowHeight可以为固定数值或者一个函数返回一个数值, 结合 CellMeasurer可以获取动态内容的高度

另外, 可以使用 ref获取其 api, 调用scrollToPosition可以平滑的滚动到指定的 index(搜索功能)

List是Grid的语法糖, 内部使用Grid的 api 实现的。详见源码

结论

记得第一次使用该库是 17 年，填了不少坑, 后面总结了经验, 然后到现在, 大概总共用到 4-5 次,相对来说使用频率很低。但是, 每次使用它开发完成后，成就感很高 😎。

另外, 掌握它, 还有一个很大的好处:

前端性能优化这个话题在面试属于一个加分问题,如果你能搬出react-virtualized并讲讲使用,难道不比那种百度即可得的东西给人的印象更深刻？？

prettier 代码格式化工具集成

Thu, 03 Jan 2019 00:00:00 GMT

prettier是一个固定的代码格式化程序。如果您再也不想担心代码格式化，请在编辑器中安装 Prettier，它将为您处理格式化。 Prettier 从您的代码中创建一个抽象语法树，并使用它来编写根据一组规则格式化的新代码。

这是我安装 prettier, husky, lint-staged的过程, 目标自动格式化代码,统一团队开发规范

安装版本为: prettier(v1.15.3), husky(v1.3.1), lint-staged(v8.1.0)，webstorm(2018.3.2)不同版本也许会不一致

安装 prettier

yarn add prettier --dev

webstorm 配置

perferences -> plugins -> 搜索 prettier, 安装插件。

get-plugin-prettier

重启 webstorm

perferences -> Languages & Frameworks -> Javascript -> prettier, 设置 prettier 安装目录

set-path

最后设置快捷键 perferences -> keymap -> 搜索prettier, 然后设置快捷键, 我设置成了 command + shift + f

set-shortcut

安装 husk, lint-staged

yarn add husky lint-staged --dev

然后在package.json中添加

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,json,md}": ["prettier --write", "git add"]
  }
}

随意修改文件,然后 git commit, 文件自动被格式化了 👌

FAQ

prettier , husk, lint-stage 关系

prettier 只会格式化代码, 但是他不会决定你何时格式化代码。

husky 是 git 钩子，让你在各个周期中执行自定义脚本

lint-staged 相当于 git 的 eslint,其实如果不用 lint-staged,也是可以的

prettier vs eslint

eslint 功能其实比 prettier 功能更多, prettier 不会阻塞开发者, 也不会执行语法检查。在开发中, 个人认为 eslint 适合多人协作项目, 小团队并不适用。

Reference

husky

lint-staged

prettier

shell script

Wed, 02 Jan 2019 00:00:00 GMT

背景

因为之前一直在 windows系统上,shell很少接触。但是最近切换到了macos, 发现不熟悉shell做事没有效率。故只能学习一下。这是我从 devhints复制的 shell 学习资料, 用作记录。

shell里面

基本

#!/usr/bin/env bash 必须出现在每一个shell脚本之前

#!/usr/bin/env bash
# 这是注释, 使用 #开始

NAME="John"
echo "Hello $NAME!"

Variables

定义变量

NAME="John"
echo $NAME
echo "$NAME"
echo "${NAME}!"

String quotes

字符串

NAME="John"
echo "Hi $NAME"  #=> Hi John
echo 'Hi $NAME'  #=> Hi $NAME

Shell execution

字符串中引用变量

echo "I'm in $(pwd)"
echo "I'm in `pwd`"
# Same

See Command substitution

Conditional execution

git commit && git push
git commit || echo "Commit failed"

Functions

定义和调用方法

get_name() {
  echo "John"
}

echo "You are $(get_name)"

Conditionals

if [[ -z "$string" ]]; then
  echo "String is empty"
elif [[ -n "$string" ]]; then
  echo "String is not empty"
fi

Strict mode

set -euo pipefail
IFS=$'\n\t'

See: Unofficial bash strict mode

Brace expansion

echo {A,B}.js

| {A,B} | Same as A B | | {A,B}.js | Same as A.js B.js | | {1..5} | Same as 1 2 3 4 5 |

See: Brace expansion

Parameter expansions

Basics

字符串截取

name="John"
echo ${name}
echo ${name/J/j}    #=> "john" (substitution)
echo ${name:0:2}    #=> "Jo" (slicing)
echo ${name::2}     #=> "Jo" (slicing)
echo ${name::-1}    #=> "Joh" (slicing)
echo ${name:(-1)}   #=> "n" (slicing from right)
echo ${name:(-2):1} #=> "h" (slicing from right)
echo ${food:-Cake}  #=> $food or "Cake"

length=2
echo ${name:0:length}  #=> "Jo"

See: Parameter expansion

STR="/path/to/foo.cpp"
echo ${STR%.cpp}    # /path/to/foo
echo ${STR%.cpp}.o  # /path/to/foo.o

echo ${STR##*.}     # cpp (extension)
echo ${STR##*/}     # foo.cpp (basepath)

echo ${STR#*/}      # path/to/foo.cpp
echo ${STR##*/}     # foo.cpp

echo ${STR/foo/bar} # /path/to/bar.cpp

STR="Hello world"
echo ${STR:6:5}   # "world"
echo ${STR:-5:5}  # "world"

SRC="/path/to/foo.cpp"
BASE=${SRC##*/}   #=> "foo.cpp" (basepath)
DIR=${SRC%$BASE}  #=> "/path/to/" (dirpath)

Substitution

Code	Description
`${FOO%suffix}`	Remove suffix
`${FOO#prefix}`	Remove prefix
---	---
`${FOO%%suffix}`	Remove long suffix
`${FOO##prefix}`	Remove long prefix
---	---
`${FOO/from/to}`	Replace first match
`${FOO//from/to}`	Replace all
---	---
`${FOO/%from/to}`	Replace suffix
`${FOO/#from/to}`	Replace prefix

Comments

# Single line comment

: '
This is a
multi line
comment
'

Substrings

| ${FOO:0:3} | Substring (position, length) | | ${FOO:-3:3} | Substring from the right |

Length

| ${#FOO} | Length of $FOO |

Default values

| ${FOO:-val} | $FOO, or val if not set | | ${FOO:=val} | Set $FOO to val if not set | | ${FOO:+val} | val if $FOO is set | | ${FOO:?message} | Show error message and exit if $FOO is not set |

The : is optional (eg, ${FOO=word} works)

Loops

Basic for loop

for i in /etc/rc.*; do
  echo $i
done

Ranges

for i in {1..5}; do
    echo "Welcome $i"
done

With step size

for i in {5..50..5}; do
    echo "Welcome $i"
done

Reading lines

while IFS='' read -r line ||[[ -n "$line" ]] ; do
 echo "$line"
 done < package.json

说明

IFS='' (or IFS=) prevents leading/trailing whitespace from being trimmed.
-r prevents backslash escapes from being interpreted.
|| [[ -n $line ]] prevents the last line from being ignored if it doesn’t end with a \n (since read returns a non-zero exit code when it encounters EOF).

Forever

while true; do
  ···
done

Functions

Defining functions

myfunc() {
    echo "hello $1"
}

# Same as above (alternate syntax)
# 我更喜欢这种, 和js很像
function myfunc() {
    echo "hello $1"
}

myfunc "John"

Returning values

myfunc() {
    local myresult='some value'
    echo $myresult
}

result="$(myfunc)"

Raising errors

myfunc() {
  return 1
}

if myfunc; then
  echo "success"
else
  echo "failure"
fi

Arguments

Expression	Description
`$#`	Number of arguments
`$*`	All arguments
`$@`	All arguments, starting from first
`$1`	First argument

See Special parameters.

Conditionals

Conditions

Note that [[ is actually a command/program that returns either 0 (true) or 1 (false). Any program that obeys the same logic (like all base utils, such as grep(1) or ping(1)) can be used as condition, see examples.

Condition	Description
`[[ -z STRING ]]`	Empty string
`[[ -n STRING ]]`	Not empty string
`[[ STRING == STRING ]]`	Equal
`[[ STRING != STRING ]]`	Not Equal
---	---
`[[ NUM -eq NUM ]]`	Equal
`[[ NUM -ne NUM ]]`	Not equal
`[[ NUM -lt NUM ]]`	Less than
`[[ NUM -le NUM ]]`	Less than or equal
`[[ NUM -gt NUM ]]`	Greater than
`[[ NUM -ge NUM ]]`	Greater than or equal
---	---
`[[ STRING =~ STRING ]]`	Regexp
---	---
`(( NUM < NUM ))`	Numeric conditions

Condition	Description
`[[ -o noclobber ]]`	If OPTIONNAME is enabled
---	---
`[[ ! EXPR ]]`	Not
`[[ X ]] && [[ Y ]]`	And
`[[ X ]]	[[ Y ]]`

File conditions

Condition	Description
`[[ -e FILE ]]`	Exists
`[[ -r FILE ]]`	Readable
`[[ -h FILE ]]`	Symlink
`[[ -d FILE ]]`	Directory
`[[ -w FILE ]]`	Writable
`[[ -s FILE ]]`	Size is > 0 bytes
`[[ -f FILE ]]`	File
`[[ -x FILE ]]`	Executable
---	---
`[[ FILE1 -nt FILE2 ]]`	1 is more recent than 2
`[[ FILE1 -ot FILE2 ]]`	2 is more recent than 1
`[[ FILE1 -ef FILE2 ]]`	Same files

Example

if ping -c 1 google.com; then
  echo "It appears you have a working internet connection"
fi

if grep -q 'foo' ~/.bash_history; then
  echo "You appear to have typed 'foo' in the past"
fi

# String
if [[ -z "$string" ]]; then
  echo "String is empty"
elif [[ -n "$string" ]]; then
  echo "String is not empty"
fi

# Combinations
if [[ X ]] && [[ Y ]]; then
  ...
fi

# Equal
if [[ "$A" == "$B" ]]

# Regex
if [[ "A" =~ "." ]]

if (( $a < $b )); then
   echo "$a is smaller than $b"
fi

测试文件是否存在

if [[ -e "file.txt" ]]; then
  echo "file exists"
fi

Arrays

Defining arrays

Fruits=('Apple' 'Banana' 'Orange')

Fruits[0]="Apple"
Fruits[1]="Banana"
Fruits[2]="Orange"

Working with arrays

echo ${Fruits[0]}           # Element #0
echo ${Fruits[@]}           # All elements, space-separated
echo ${#Fruits[@]}          # Number of elements
echo ${#Fruits}             # String length of the 1st element
echo ${#Fruits[3]}          # String length of the Nth element
echo ${Fruits[@]:3:2}       # Range (from position 3, length 2)

Operations

Fruits=("${Fruits[@]}" "Watermelon")    # Push
Fruits+=('Watermelon')                  # Also Push
Fruits=( ${Fruits[@]/Ap*/} )            # Remove by regex match
unset Fruits[2]                         # Remove one item
Fruits=("${Fruits[@]}")                 # Duplicate
Fruits=("${Fruits[@]}" "${Veggies[@]}") # Concatenate
lines=(`cat "logfile"`)                 # Read from file

Iteration

for i in "${arrayName[@]}"; do
  echo $i
done

Options

set -o noclobber  # Avoid overlay files (echo "hi" > foo)
set -o errexit    # Used to exit upon error, avoiding cascading errors
set -o pipefail   # Unveils hidden failures
set -o nounset    # Exposes unset variables

Glob options

set -o nullglob    # Non-matching globs are removed  ('*.foo' => '')
set -o failglob    # Non-matching globs throw errors
set -o nocaseglob  # Case insensitive globs
set -o globdots    # Wildcards match dotfiles ("*.sh" => ".foo.sh")
set -o globstar    # Allow ** for recursive matches ('lib/**/*.rb' => 'lib/a/b/c.rb')

Set GLOBIGNORE as a colon-separated list of patterns to be removed from glob matches.

History

Commands

Expansions

Operations

!! and !$ can be replaced with any valid expansion.

Slices

| !!:n | Expand only nth token from most recent command (command is 0; first argument is 1) | | !^ | Expand first argument from most recent command | | !$ | Expand last token from most recent command | | !!:n-m | Expand range of tokens from most recent command | | !!:n-$ | Expand nth token to last from most recent command |

!! can be replaced with any valid expansion i.e. !cat, !-2, !42, etc.

Miscellaneous

Numeric calculations

$((a + 200))      # Add 200 to $a

$((RANDOM%=200))  # Random number 0..200

Subshells

(cd somedir; echo "I'm now in $PWD")
pwd # still in first directory

Redirection

python hello.py > output.txt   # stdout to (file)
python hello.py >> output.txt  # stdout to (file), append
python hello.py 2> error.log   # stderr to (file)
python hello.py 2>&1           # stderr to stdout
python hello.py 2>/dev/null    # stderr to (null)
python hello.py &>/dev/null    # stdout and stderr to (null)

python hello.py < foo.txt      # feed foo.txt to stdin for python

Inspecting commands

command -V cd
#=> "cd is a function/alias/whatever"

Trap errors

trap 'echo Error at about $LINENO' ERR

traperr() {
  echo "ERROR: ${BASH_SOURCE[1]} at about ${BASH_LINENO[0]}"
}

set -o errtrace
trap traperr ERR

Case/switch

case "$1" in
  start | up)
    vagrant up
    ;;

  *)
    echo "Usage: $0 {start|stop|ssh}"
    ;;
esac

Source relative

source "${0%/*}/../share/foo.sh"

printf

printf "Hello %s, I'm %s" Sven Olga
#=> "Hello Sven, I'm Olga

Directory of script

DIR="${0%/*}"

Getting options

while [[ "$1" =~ ^- && ! "$1" == "--" ]]; do case $1 in
  -V | --version )
    echo $version
    exit
    ;;
  -s | --string )
    shift; string=$1
    ;;
  -f | --flag )
    flag=1
    ;;
esac; shift; done
if [[ "$1" == '--' ]]; then shift; fi

Heredoc

cat <<END
hello world
END

Reading input

echo -n "Proceed? [y/n]: "
read ans
echo $ans

read -n 1 ans    # Just one character

Special variables

| $? | Exit status of last task | | $! | PID of last background task | | $$ | PID of shell |

See Special parameters.

Go to previous directory

pwd # /home/user/foo
cd bar/
pwd # /home/user/foo/bar
cd -
pwd # /home/user/foo

Also see

Bash-hackers wiki (bash-hackers.org)
Shell vars (bash-hackers.org)
Learn bash in y minutes (learnxinyminutes.com)
Bash Guide (mywiki.wooledge.org)
ShellCheck (shellcheck.net)

create-react-app 源代码简析(3)

Tue, 01 Jan 2019 00:00:00 GMT

最后, 查看 ~packages/react-scripts/config/paths.js

这里定义了整个CRA需要用到的路径

这里面情况很特殊, CRA 存在一种eject的情况, 会把所有配置暴露出来, 让用户自己修改。故我会忽略eject的情况, 代码会变成如下：

不考虑 eject 后的path代码

module.exports = {
  //
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
  // These properties only exist before ejecting:
  ownPath: resolveOwn('.'),
  ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
  appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
  ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
};

create-react-app 源代码简析(2)

Mon, 31 Dec 2018 00:00:00 GMT

webpack配置解析

承接上篇create-react-app 源代码简析(1)

~/packages/react-scripts/config/webpack.config.js 是整个 CRA 的核心。这一版本 CRA 将开发和生产的 webpack.config 合 2 为 1, 虽然精简了代码量, 但使得阅读难度大大提升

变量设置, 组件引用

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const resolve = require('resolve')
const PnpWebpackPlugin = require('pnp-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const safePostCssParser = require('postcss-safe-parser')
const ManifestPlugin = require('webpack-manifest-plugin')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
const paths = require('./paths')
const getClientEnvironment = require('./env')
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt')
const typescriptFormatter = require('react-dev-utils/typescriptFormatter')
const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier')

// 通过 GENERATE_SOURCEMAP=false 控制是否生成 sourcemap
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
// 通过 INLINE_RUNTIME_CHUNK=false 控制是否内联 runtimeChunk
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'

// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig)

// 样式文件正则
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/

CRA 中 webpack.config.js 配置说明说的很完善, 我只会添加一些个人见解和简单翻译

module.exports = function(webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development'
  const isEnvProduction = webpackEnv === 'production'

  // webpack 使用 `publicPath` 来决定app部署在哪
  // 它要求以 斜杠'/' 开始, 否则生成的asset无法正确部署
  // 在开发模式, 我们总是以 根目录'/'开始
  const publicPath = isEnvProduction
    ? paths.servedPath
    : isEnvDevelopment && '/'
  // 有一些 app 不使用 客服端渲染
  // 所以 通过设置 homepage: "." 可以使用相对路径
  const shouldUseRelativeAssetPaths = publicPath === './'

  // `publicUrl` 和 `publicPath` 类似, 但是 `publicUrl`是 `publicPath`去掉最后的 /
  const publicUrl = isEnvProduction
    ? publicPath.slice(0, -1)
    : isEnvDevelopment && ''
  // 获取需要 inject的 环境变量
  const env = getClientEnvironment(publicUrl)

  // 获取style loader的通用方法
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign(
          {},
          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
        ),
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean)
    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      })
    }
    return loaders
  }

  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    // Stop compilation early in production
    bail: isEnvProduction,
    // 开发环境, 是使用 cheap-module-source-map
    // 生产, 基于 shouldUseSourceMap 判断是否使用 'source-map'
    // 备注: 我对 cheap-module-source-map 这种sourcemap不喜欢, 有不少bug。
    devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && 'cheap-module-source-map',
    entry: [
      // CRA 定制了和服务器端和客户端通信的组件, react-dev-utils/webpackHotDevClient
      // 记住, WebpackDevServer 是服务器, react-dev-utils/webpackHotDevClient 是于页面通信的客户端
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
      // 项目根目录
      paths.appIndexJs,
    ].filter(Boolean),
    output: {
      // 构建目录, 如果在开发环境, 那么会使用 cache 方式, 不会实际输入到disk中
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // 设置生成文件的名称
      // 开发模式下, 不产生真实文件
      filename: isEnvProduction
        ? 'static/js/[name].[chunkhash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // 设置chunk文件的名称
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[chunkhash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      // 生产模式根据外部情况改变.
      // 开发模式使用 "/.
      publicPath: publicPath,
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, '/')
        : isEnvDevelopment &&
          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    },
    optimization: {
      //只在生产模式下有用，如何压缩代码
      minimize: isEnvProduction,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            parse: {
              ecma: 8,
            },
            compress: {
              ecma: 5,
              warnings: false,
              comparisons: false,
              inline: 2,
            },
            mangle: {
              safari10: true,
            },
            output: {
              ecma: 5,
              comments: false,
              ascii_only: true,
            },
          },
          parallel: true,
          cache: true,
          sourceMap: shouldUseSourceMap,
        }),
        // This is only used in production mode
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            parser: safePostCssParser,
            map: shouldUseSourceMap
              ? {
                  //使得css输出成文件
                  inline: false,
                  annotation: true,
                }
              : false,
          },
        }),
      ],
      // webpack v4 代码分割 split vendor and commons
      // https://twitter.com/wSokra/status/969633336732905474
      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
      splitChunks: {
        chunks: 'all',
        name: false,
      },
      // 是否生成 runtimeCache
      runtimeChunk: true,
    },
    resolve: {
      // This allows you to set a fallback for where Webpack should look for modules.
      // We placed these paths second because we want `node_modules` to "win"
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebook/create-react-app/issues/253
      modules: ['node_modules'].concat(
        // It is guaranteed to exist because we tweak it in `env.js`
        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
      ),
      // 设置后缀, 即 import * from "./button", 可以省略后缀
      extensions: paths.moduleFileExtensions
        .map(ext => `.${ext}`)
        .filter(ext => useTypeScript || !ext.includes('ts')),
      alias: {
         // react-native浏览器端渲染
        'react-native': 'react-native-web',
      },
      plugins: [
        // 支持 yarn 的 Plug'n'Play 特性
        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
        // guards against forgotten dependencies and such.
        PnpWebpackPlugin,
        // 只允许开发者调用 src目录下的文件
        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
      ],
    },
    resolveLoader: {
      plugins: [
        // 支持 yarn 的 Plug'n'Play 特性
        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
        // from the current package.
        PnpWebpackPlugin.moduleLoader(module),
      ],
    },
    module: {
      strictExportPresence: true,
      rules: [
        // 禁用 require.ensure as it's not a standard language feature.
        { parser: { requireEnsure: false } },

        // eslint
        {
          test: /\.(js|mjs|jsx)$/,
          // eslint 配置必须前置
          enforce: 'pre',
          use: [
            {
              options: {
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                // @remove-on-eject-begin
                baseConfig: {
                  extends: [require.resolve('eslint-config-react-app')],
                  settings: { react: { version: '999.999.999' } },
                },
                ignore: false,
                useEslintrc: false,
                // @remove-on-eject-end
              },
              loader: require.resolve('eslint-loader'),
            },
          ],
          include: paths.appSrc,
        },
        {
          // 使用 oneOf 可以按照顺序执行，如果都不满足, 执行最后的 file loader
          oneOf: [
            // "url" loader works like "file" loader except that it embeds assets
            // smaller than specified limit in bytes as data URLs to avoid requests.
            // A missing `test` is equivalent to a match.
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve('url-loader'),
              options: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            // Process application JS with Babel.
            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                babelrc: false,
                configFile: false,
                // CRA 自定义了 babel配置, 独立成了一个模块 babel-preset-react-app
                presets: [require.resolve('babel-preset-react-app')],
                // Make sure we have a unique cache identifier, erring on the
                // side of caution.
                // We remove this when the user ejects because the default
                // is sane and uses Babel options. Instead of options, we use
                // the react-scripts and babel-preset-react-app versions.
                cacheIdentifier: getCacheIdentifier(
                  isEnvProduction
                    ? 'production'
                    : isEnvDevelopment && 'development',
                  [
                    'babel-plugin-named-asset-import',
                    'babel-preset-react-app',
                    'react-dev-utils',
                    'react-scripts',
                  ]
                ),
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-prettier,-svgo![path]',
                        },
                      },
                    },
                  ],
                ],

                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },
            // Process any JS outside of the app with Babel.
            // Unlike the application JS, we only compile the standard ES features.
            // CRA 依然还会处理 node_modules以外的模块
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                // CRA 自定义了 babel配置, 独立成了一个模块 babel-preset-react-app
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },
                  ],
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                cacheIdentifier: getCacheIdentifier(
                  isEnvProduction
                    ? 'production'
                    : isEnvDevelopment && 'development',
                  [
                    'babel-plugin-named-asset-import',
                    'babel-preset-react-app',
                    'react-dev-utils',
                    'react-scripts',
                  ]
                ),
                // If an error happens in a package, it's possible to be
                // because it was compiled. Thus, we don't want the browser
                // debugger to show the original code. Instead, the code
                // being evaluated would be much more helpful.
                sourceMaps: false,
              },
            },
            // "postcss" loader applies autoprefixer to our CSS.
            // "css" loader resolves paths in CSS and adds assets as dependencies.
            // "style" loader turns CSS into JS modules that inject <style> tags.
            // In production, we use MiniCSSExtractPlugin to extract that CSS
            // to a file, but in development "style" loader enables hot editing
            // of CSS.
            // By default we support CSS Modules with the extension .module.css
            // 一系类的css模块处理
            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
            // Opt-in support for SASS (using .scss or .sass extensions).
            // By default we support SASS Modules with the
            // extensions .module.scss or .module.sass
            {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'sass-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },
            // "file" loader makes sure those assets get served by WebpackDevServer.
            // When you `import` an asset, you get its (virtual) filename.
            // In production, they would get copied to the `build` folder.
            // This loader doesn't use a "test" so it will catch all modules
            // that fall through the other loaders.
            {
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.
          ],
        },
      ],
    },
    plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),
      // Inlines the webpack runtime script. This script is too small to warrant
      // a network request.
      isEnvProduction &&
        shouldInlineRuntimeChunk &&
        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
      // Makes some environment variables available in index.html.
      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
      // In production, it will be an empty string unless you specify "homepage"
      // in `package.json`, in which case it will be the pathname of that URL.
      // In development, this will be an empty string.
      // 这个插件使得所有env变量在html可以使用
      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
      // This gives some necessary context to module not found errors, such as
      // the requesting resource.
      new ModuleNotFoundPlugin(paths.appPath),
      // Makes some environment variables available to the JS code, for example:
      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
      // It is absolutely essential that NODE_ENV is set to production
      // during a production build.
      // Otherwise React will be compiled in the very slow development mode.
      new webpack.DefinePlugin(env.stringified),
      // This is necessary to emit hot updates (currently CSS only):
      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
      // Watcher doesn't work well if you mistype casing in a path so we use
      // a plugin that prints an error when you attempt to do this.
      // See https://github.com/facebook/create-react-app/issues/240
      isEnvDevelopment && new CaseSensitivePathsPlugin(),
      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebook/create-react-app/issues/186
      isEnvDevelopment &&
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
      isEnvProduction &&
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }),
      // Generate a manifest file which contains a mapping of all asset filenames
      // to their corresponding output file so that tools can pick it up without
      // having to parse `index.html`.
      new ManifestPlugin({
        fileName: 'asset-manifest.json',
        publicPath: publicPath,
      }),
      // Moment.js is an extremely popular library that bundles large locale files
      // by default due to how Webpack interprets its code. This is a practical
      // solution that requires the user to opt into importing specific locales.
      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
      // You can remove this if you don't use Moment.js:
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // Generate a service worker script that will precache, and keep up to date,
      // the HTML & assets that are part of the Webpack build.
      // workbox 用于离线app, 是否必须开启, 我抱有怀疑
      isEnvProduction &&
        new WorkboxWebpackPlugin.GenerateSW({
          clientsClaim: true,
          exclude: [/\.map$/, /asset-manifest\.json$/],
          importWorkboxFrom: 'cdn',
          navigateFallback: publicUrl + '/index.html',
          navigateFallbackBlacklist: [
            // Exclude URLs starting with /_, as they're likely an API call
            new RegExp('^/_'),
            // Exclude URLs containing a dot, as they're likely a resource in
            // public/ and not a SPA route
            new RegExp('/[^/]+\\.[^/]+$'),
          ],
        }),
      // TypeScript type checking
      useTypeScript &&
        new ForkTsCheckerWebpackPlugin({
          typescript: resolve.sync('typescript', {
            basedir: paths.appNodeModules,
          }),
          async: false,
          checkSyntacticErrors: true,
          tsconfig: paths.appTsConfig,
          compilerOptions: {
            module: 'esnext',
            moduleResolution: 'node',
            resolveJsonModule: true,
            isolatedModules: true,
            noEmit: true,
            jsx: 'preserve',
          },
          reportFiles: [
            '**',
            '!**/*.json',
            '!**/__tests__/**',
            '!**/?(*.)(spec|test).*',
            '!**/src/setupProxy.*',
            '!**/src/setupTests.*',
          ],
          watch: paths.appSrc,
          silent: true,
          formatter: typescriptFormatter,
        }),
    ].filter(Boolean),
    // Some libraries import Node modules but don't use them in the browser.
    // Tell Webpack to provide empty mocks for them so importing them works.
    node: {
      dgram: 'empty',
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty',
    },
    // Turn off performance processing because we utilize
    // our own hints via the FileSizeReporter
    performance: false,
  }
}

这篇webpack配置可以算是webpack的经典配置, 包含大量的插件使用, 非常适合收藏

LC_CTYPE: cannot change locale (UTF-8): No such file or directory

Mon, 31 Dec 2018 00:00:00 GMT

centos阿里云服务器登录警告 LC_CTYPE: cannot change locale (UTF-8): No such file or directory

LC_CTYPE: cannot change locale (UTF-8): No such file or directory

如何解决: 在文件

vi /etc/environment

添加这2行

LANG=en_US.utf-8
LC_ALL=en_US.utf-8

create-react-app 源代码简析(1)

Sun, 30 Dec 2018 00:00:00 GMT

前言

create-react-app 简称为 CRA, 之后均用 CRA表示 create-react-app

create-react-app是个多包仓库, 我 fork 了一份(地址), 以便追溯。

核心包: react-scripts 简析版本为2.1.1, 发布日期为 2018-11-01

typescript 由于我不熟悉, 故相关部分会会不准确,请见谅！

webpack是功能强大的自动化前端构建工具, 但是配置复杂多变。create-react-app将webpack配置隐藏起来,适合新入门react的开发者。另外一种使用场景为需要同时在多个项目中开发, 又想保证不同项目配置统一, create-react-app是一种不错的选择。为了能在工作中用好create-react-app, 所以需要深入了解去实现源码,故作此笔记。

项目目录介绍

整个 CRA 包含多个 npm 包, 分别放置于 ~/packages 目录下

create-react-app : 安装脚手架
react-scripts: 核心包
eslint-config-react-app: eslint 配置
react-dev-utils: 构建过程中需要用到的工具方法
react-error-overly: react 构建出错时, 页面弹出的 ui 组件
babel-preset-react-app: 构建时, react 的 babel 依赖
babel-plugin-named-asset-import, confusing-browser-globals 等一些辅助功能的文件

~/docusaurus下的为文档存放区, 基于 FB 的docusaurus文档框架编写, 我的mogul的文档也是基于该框架。有空我会另外写一遍笔记, 介绍 docusaurus。

其他都是一些 npm 发布, github, ci 相关的配置, 不影响业务逻辑, 所以全都跳过。

CRA 安装

npx create-react-app my-app
cd my-app
npm start

为什么 🤔npx create-react-app my-app能够执行? 在 ~/packages/create-react-app/package.json

"bin": {
   "create-react-app": "./index.js"}

npx 方式 bin.”create-react-app” 不是一定需要的, 但最好保持一致

查看代码位于~/packages/create-react-app/index.js

// 这一行很特别, 必须加入这一行, 才可以让该文件变为命令行可执行文件
#!/usr/bin/env node'use strict';

// 一些nodejs版本的检查
var chalk = require('chalk');

var currentNodeVersion = process.versions.node;
var semver = currentNodeVersion.split('.');
var major = semver[0];

if (major < 8) {
  console.error(
    chalk.red(
      'You are running Node ' +
        currentNodeVersion +
        '.\n' +
        'Create React App requires Node 8 or higher. \n' +
        'Please update your version of Node.'
    )
  );
  process.exit(1);
}

//启动文件
require('./createReactApp');

于~/packages/create-react-app/createReactApp.js

设置项目名称

let projectName

const program = new commander.Command(packageJson.name)
  .version(packageJson.version)
  .arguments('<project-directory>')
  .usage(`${chalk.green('<project-directory>')} [options]`)
  .action(name => {    projectName = name // 获取项目名称  })
//...然后执行一系列项目名称的检验
// 执行创建方法
createApp(
  projectName,
  program.verbose,
  program.scriptsVersion,
  program.useNpm,
  program.usePnp,
  program.typescript,
  hiddenProgram.internalTestingTemplate
)

/**
 * 注意, 只有 name 参数是必要的，其他的都是可选
 * template 参数在实际使用永远为false
 */
function createApp(
  name,
  verbose,
  version,
  useNpm,
  usePnp,
  useTypescript,
  template
) {
  const root = path.resolve(name)
  const appName = path.basename(root)

  /**
   * 检查项目名称是否合法
   * 包含:
   *  1.检查是否符合 npm命名规范
   *  2.名称黑名单检测: 不允许 react, react-dom, react-scripts等
   */
  checkAppName(appName)  // 检查目录并不存在， 如果存在, 那么检查文件是否可以创建
  fs.ensureDirSync(name)  if (!isSafeToCreateProjectIn(root, name)) {    process.exit(1)  }
  console.log(`Creating a new React app in ${chalk.green(root)}.`)
  console.log()

  const packageJson = {
    name: appName,
    version: '0.1.0',
    private: true,
  }
  // 写入package.json文件
  fs.writeFileSync(    path.join(root, 'package.json'),    JSON.stringify(packageJson, null, 2) + os.EOL  )
  // yarn或者npm 选择判断,以及权限判定
  const useYarn = useNpm ? false : shouldUseYarn()
  const originalDirectory = process.cwd()
  process.chdir(root)
  if (!useYarn && !checkThatNpmCanReadCwd()) {
    process.exit(1)
  }

  if (!semver.satisfies(process.version, '>=6.0.0')) {
    console.log(
      chalk.yellow(
        `You are using Node ${
          process.version
        } so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
          `Please update to Node 6 or higher for a better, fully supported experience.\n`
      )
    )
    // Fall back to latest supported react-scripts on Node 4
    version = 'react-scripts@0.9.x'
  }

  if (!useYarn) {
    const npmInfo = checkNpmVersion()
    if (!npmInfo.hasMinNpm) {
      if (npmInfo.npmVersion) {
        console.log(
          chalk.yellow(
            `You are using npm ${
              npmInfo.npmVersion
            } so the project will be boostrapped with an old unsupported version of tools.\n\n` +
              `Please update to npm 3 or higher for a better, fully supported experience.\n`
          )
        )
      }
      // Fall back to latest supported react-scripts for npm 3
      version = 'react-scripts@0.9.x'
    }
  } else if (usePnp) {
    const yarnInfo = checkYarnVersion()
    if (!yarnInfo.hasMinYarnPnp) {
      if (yarnInfo.yarnVersion) {
        chalk.yellow(
          `You are using Yarn ${
            yarnInfo.yarnVersion
          } together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
            `Please update to Yarn 1.12 or higher for a better, fully supported experience.\n`
        )
      }
      // 1.11 had an issue with webpack-dev-middleware, so better not use PnP with it (never reached stable, but still)
      usePnp = false
    }
  }
  // 应用 yarn的缓存功能
  if (useYarn) {
    fs.copySync(
      require.resolve('./yarn.lock.cached'),
      path.join(root, 'yarn.lock')
    )
  }

  // 生成代码
  run(
    root,
    appName,
    version,
    verbose,
    originalDirectory,
    template,
    useYarn,
    usePnp,
    useTypescript
  )
}

function run(
  root,
  appName,
  version,
  verbose,
  originalDirectory,
  template,
  useYarn,
  usePnp,
  useTypescript
) {
  // 获取react-scripts, 如果设置了版本, 那么会安装对应版本的 react-scripts, 否则就为 react-scripts
  const packageToInstall = getInstallPackage(version, originalDirectory)  const allDependencies = ['react', 'react-dom', packageToInstall]
  if (useTypescript) {
    // TODO: get user's node version instead of installing latest
    allDependencies.push(
      '@types/node',
      '@types/react',
      '@types/react-dom',
      '@types/jest',
      'typescript'
    )
  }

  console.log('Installing packages. This might take a couple of minutes.')
  // promise形式安装依赖
  getPackageName(packageToInstall)
    .then(packageName =>
      // 是否使用 yarn的离线功能
      checkIfOnline(useYarn).then(isOnline => ({
        isOnline: isOnline,
        packageName: packageName,
      }))
    )
    .then(info => {
      const isOnline = info.isOnline
      const packageName = info.packageName
      console.log(
        `Installing ${chalk.cyan('react')}, ${chalk.cyan(
          'react-dom'
        )}, and ${chalk.cyan(packageName)}...`
      )
      console.log()

      // 真正执行安装依赖
      return install(
        root,
        useYarn,
        usePnp,
        allDependencies,
        verbose,
        isOnline
      ).then(() => packageName)
    })
    .then(async packageName => {
      // 再次检测node版本(个人感觉有点多余😅)
      checkNodeVersion(packageName)
      // 把 修改 react, react-dom 依赖版本写法 e.g. 16.0.2 => ^16.0.2
      setCaretRangeForRuntimeDeps(packageName)

      const pnpPath = path.resolve(process.cwd(), '.pnp.js')

      const nodeArgs = fs.existsSync(pnpPath) ? ['--require', pnpPath] : []

      // bash 调用 react-scripts中的init脚本, 执行模板初始化
      await executeNodeScript(        {          cwd: process.cwd(),          args: nodeArgs,        },        [root, appName, verbose, originalDirectory, template],        `var init = require('${packageName}/scripts/init.js');        init.apply(null, JSON.parse(process.argv[1]));      `      )      if (version === 'react-scripts@0.9.x') {
        console.log(
          chalk.yellow(
            `\nNote: the project was bootstrapped with an old unsupported version of tools.\n` +
              `Please update to Node >=6 and npm >=3 to get supported tools in new projects.\n`
          )
        )
      }
    })
    .catch(reason => {
      // 在 错误处理上, 需要保证打印足够多的日志,并且还原设置
      console.log()
      console.log('Aborting installation.')
      if (reason.command) {
        console.log(`  ${chalk.cyan(reason.command)} has failed.`)
      } else {
        console.log(chalk.red('Unexpected error. Please report it as a bug:'))
        console.log(reason)
      }
      console.log()

      // On 'exit' we will delete these files from target directory.
      const knownGeneratedFiles = ['package.json', 'yarn.lock', 'node_modules']
      const currentFiles = fs.readdirSync(path.join(root))
      currentFiles.forEach(file => {
        knownGeneratedFiles.forEach(fileToMatch => {
          // This remove all of knownGeneratedFiles.
          if (file === fileToMatch) {
            console.log(`Deleting generated file... ${chalk.cyan(file)}`)
            fs.removeSync(path.join(root, file))
          }
        })
      })
      const remainingFiles = fs.readdirSync(path.join(root))
      if (!remainingFiles.length) {
        // Delete target folder if empty
        console.log(
          `Deleting ${chalk.cyan(`${appName}/`)} from ${chalk.cyan(
            path.resolve(root, '..')
          )}`
        )
        process.chdir(path.resolve(root, '..'))
        fs.removeSync(path.join(root))
      }
      console.log('Done.')
      process.exit(1)
    })
}

至此, create-react-app 跳转至 react-scripts的init脚本, init 脚本主要是生成 template 文件

于 ~/packages/react-scripts/scripts/init.js

function(
  appPath,
  appName,
  verbose,
  originalDirectory,
  template
) {
  const ownPath = path.dirname(
    require.resolve(path.join(__dirname, '..', 'package.json'))
  );
  const appPackage = require(path.join(appPath, 'package.json'));
  const useYarn = fs.existsSync(path.join(appPath, 'yarn.lock'));

  // Copy over some of the devDependencies
  appPackage.dependencies = appPackage.dependencies || {};

  const useTypeScript = appPackage.dependencies['typescript'] != null;

  // 设置脚本
  appPackage.scripts = {    start: 'react-scripts start',    build: 'react-scripts build',    test: 'react-scripts test',    eject: 'react-scripts eject',  };
  // 设置 eslint 规则, 这在稍后该属性会被读取
  appPackage.eslintConfig = {
    extends: 'react-app',
  };

  // 设置 浏览器兼容 browserslist
  appPackage.browserslist = defaultBrowsers;

  // 再次写入package.json
  fs.writeFileSync(
    path.join(appPath, 'package.json'),
    JSON.stringify(appPackage, null, 2) + os.EOL
  );

  const readmeExists = fs.existsSync(path.join(appPath, 'README.md'));
  if (readmeExists) {
    fs.renameSync(
      path.join(appPath, 'README.md'),
      path.join(appPath, 'README.old.md')
    );
  }

  // ❗️注意, 实际template永远为 false, 只有当开发create-react-app时, 可能把其设为true
  const templatePath = template
    ? path.resolve(originalDirectory, template)
    : path.join(ownPath, useTypeScript ? 'template-typescript' : 'template');

  // 复制 `~/packages/react-scripts/template` 到模板目录
  if (fs.existsSync(templatePath)) {
    fs.copySync(templatePath, appPath);
  } else {
    console.error(
      `Could not locate supplied template: ${chalk.green(templatePath)}`
    );
    return;
  }

  // Rename gitignore after the fact to prevent npm from renaming it to .npmignore
  // See: https://github.com/npm/npm/issues/1862
  try {
    fs.moveSync(
      path.join(appPath, 'gitignore'),
      path.join(appPath, '.gitignore'),
      []
    );
  } catch (err) {
    // Append if there's already a `.gitignore` file there
    if (err.code === 'EEXIST') {
      const data = fs.readFileSync(path.join(appPath, 'gitignore'));
      fs.appendFileSync(path.join(appPath, '.gitignore'), data);
      fs.unlinkSync(path.join(appPath, 'gitignore'));
    } else {
      throw err;
    }
  }

  let command;
  let args;

  if (useYarn) {
    command = 'yarnpkg';
    args = ['add'];
  } else {
    command = 'npm';
    args = ['install', '--save', verbose && '--verbose'].filter(e => e);
  }
  args.push('react', 'react-dom');

  // Install additional template dependencies, if present
  const templateDependenciesPath = path.join(
    appPath,
    '.template.dependencies.json'
  );
  if (fs.existsSync(templateDependenciesPath)) {
    const templateDependencies = require(templateDependenciesPath).dependencies;
    args = args.concat(
      Object.keys(templateDependencies).map(key => {
        return `${key}@${templateDependencies[key]}`;
      })
    );
    fs.unlinkSync(templateDependenciesPath);
  }

  // Install react and react-dom for backward compatibility with old CRA cli
  // which doesn't install react and react-dom along with react-scripts
  // or template is presetend (via --internal-testing-template)
  if (!isReactInstalled(appPackage) || template) {
    console.log(`Installing react and react-dom using ${command}...`);
    console.log();

    const proc = spawn.sync(command, args, { stdio: 'inherit' });
    if (proc.status !== 0) {
      console.error(`\`${command} ${args.join(' ')}\` failed`);
      return;
    }
  }

  if (useTypeScript) {
    verifyTypeScriptSetup();
  }

  // 尝试 git初始化
  if (tryGitInit(appPath)) {
    console.log();
    console.log('Initialized a git repository.');
  }

  // Display the most elegant way to cd.
  // This needs to handle an undefined originalDirectory for
  // backward compatibility with old global-cli's.
  let cdpath;
  if (originalDirectory && path.join(originalDirectory, appName) === appPath) {
    cdpath = appName;
  } else {
    cdpath = appPath;
  }
  //  ..........
};

最后, 完成项目生成, react-scripts成功安装！

小结一下

纵览 create-react-app项目生成, 其实就是一个 bash 脚本的 js 版本。脚本内包含大量边界情况的判断,非常值得学习。另外, 如果要执行自己的 webpack 工具包, 那么只要稍微修改一下, 就能成为你的脚本, 值得收藏

react-scripts

CRA 中, 一共有 4 个脚本, 重点是 start, build, 故只会对开发和生产构建深入了解。😁 我相信你读这篇文章, 一定也特别想了解这 2 个脚本

{
    start: 'react-scripts start', // webpack开发模式
    build: 'react-scripts build',// webpack生产模式
    test: 'react-scripts test', // 测试
    eject: 'react-scripts eject', // 重置
}

test: 测试页面, 这个脚本我从没使用过, 大致浏览过代码, 只是调用 jest进行测试 ui, 但是我对 ui 测试的必要性抱有很大疑虑
eject: 将 CRA 隐藏的脚本, 暴露出来, 完全自定义。(我用这个脚本, 为什么不自己写, 就因为你这个完善??)

开发构建

yarn run start

此时会执行 ~/packages/react-scripts/bin/index.js 然后通过跳板, 执行 ~/packages/react-scripts/scripts/start.js

首先检测依赖

// react-scripts 使用了诸如 eslint, jest 等依赖,
// 但是用户会在自己的项目中再次安装这些依赖, 故会导致潜在错误, 所以提示用户删除这些依赖
const verifyPackageTree = require('./utils/verifyPackageTree')
// 当然, 用户也可以通过设置 SKIP_PREFLIGHT_CHECK=true 跳过这步检测
if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
  verifyPackageTree()
}
// typescript相关的检测, 我对 typescript不是很熟悉, 跳过
const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup')
verifyTypeScriptSetup()

// 略过...等等一系类的变量定义...

const { checkBrowsers } = require('react-dev-utils/browsersHelper');
// 检测浏览器, 即选择一个浏览器打开页面
// 如果系统存在默认浏览器, 那么会选择他, 如果没有, 那么会弹出提示, 要求用户选择
checkBrowsers(paths.appPath, isInteractive)
  .then(() => {
    // We attempt to use the default port but if it is busy, we offer the user to
    // run on a different port. `choosePort()` Promise resolves to the next free port.
    // 基于HOST选择端口, 如果冲突, 给出相应提示
    return choosePort(HOST, DEFAULT_PORT);
  })
  .then(port => {
    if (port == null) {
      // We have not found a port.
      return;
    }
    // 🔥获取整个 webpack dev 环境配置, 🔑关键部分,稍后详解
    const config = configFactory('development');
    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
    const appName = require(paths.appPackageJson).name;
    const urls = prepareUrls(protocol, HOST, port);
    // Create a webpack compiler that is configured with custom messages.
    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
    // Load proxy config
    const proxySetting = require(paths.appPackageJson).proxy;
    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
    // Serve webpack assets generated by the compiler over a web server.
    // 构建 devServer, 传入 proxy, 如果需要自定义devServer都在这里
    const serverConfig = createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig
    );
    // compose devServer和 webpack;
    const devServer = new WebpackDevServer(compiler, serverConfig);
    // 启动服务
    devServer.listen(port, HOST, err => {
      if (err) {
        return console.log(err);
      }
      if (isInteractive) {
        clearConsole();
      }
      console.log(chalk.cyan('Starting the development server...\n'));
      // 打开浏览器
      openBrowser(urls.localUrlForBrowser);
    });

    // 一些错误处理
    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
      process.on(sig, function() {
        devServer.close();
        process.exit();
      });
    });
  })
  .catch(err => {
    if (err && err.message) {
      console.log(err.message);
    }
    process.exit(1);
  });

build 版本的启动和 start 几乎一样, 只是去掉了 webpackDevServer, 另外加了关于webpack配置详解,请见create-react-app 源代码简析(2)

SSH登录不用密码

Fri, 21 Dec 2018 00:00:00 GMT

目标: 我想要从电脑A(Alice)自动登录到某台linux服务器B(Bob), 不需要密码. 因为你需要在CI环境下运行脚本

alice@A:~> ssh Bob@B
# 你需要密码, 目标, 自动登录, 不需要这一步
Bob@B's password:

怎么做

首先需要登录电脑A，生成一个ssh key, 注意不要输入passphrase

alice@A:~> ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/alice/.ssh/id_rsa):
Created directory '/home/alice/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/alice/.ssh/id_rsa.
Your public key has been saved in /home/alice/.ssh/id_rsa.pub.
The key fingerprint is:
3e:4f:05:79:3a:9f:96:7c:3b:ad:e9:58:37:bc:37:e4 alice@A
Now use ssh to create a directory ~/.ssh as user bob on B. (The directory may already exist, which is fine):

然后需要将上面生成的 public key添加到服务器B中

alice@A:~> cat .ssh/id_rsa.pub | ssh Bob@B 'cat >> .ssh/authorized_keys'
Bob@B's password:  #输入你的服务器密码, 登录

现在你就可以不用密码从A登录B

alice@A:~> ssh Bob@B

semantic-release 集成

Thu, 20 Dec 2018 00:00:00 GMT

背景

最近由于公司需求, 需要向 npm 推送不少包, 但是包的版本管理很麻烦。于是就寻找有没有什么高级一点的办法，首选是自己写脚本, 然后发现了 semantic-release

semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes and publishing the package. 自动化发布 package 包括: 决定迭代版本, 生产 release 日志, 以及推送 package 到服务器

初看正好符合我的需求, 故就尝试将它集成到我的mogul中

安装

项目根目录:

yarn add semantic-release --dev

然后在目录下创建文件.releaserc, 配置方式和 .babelrc类似, 就是一个 json 文件

{
  "branch": "master",
  "dryRun": false,
  "debug": false,
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    [
      "@semantic-release/npm",
      {
        "tarballDir": "dist"
      }
    ],
    [
      "@semantic-release/git",
      {
        "assets": ["package.json"],
        "message": "chore(🤖):${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
      }
    ],
    [
      "@semantic-release/github",
      {
        "assets": "dist/*.tgz"
      }
    ]
  ],
  "preset": "angular"
}

字段	描述
branch	发布 git 分支名字, 我的需求是只对 `master` 起作用
dryRun	是否空跑, 用于测试, false
debug	是否打印更多信息, 便于调试, 用于测试, false
preset	默认就是`angular`, react 没有对应的 preset, 所以选了`angular`
plugins	一系列的配置, 注意, 这些和 babel 不同, 不需要安装这些依赖

至此，安装完成！ Easy!

circleci 构建

21 世纪的项目不走 CI 构建就显得 out 了, 新增 .circleci/config.yml。更多配置请见 circleci

version: 2
jobs:
  test:
    docker:
      - image: circleci/node

    working_directory: ~/repo

    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      - run: yarn run test
  release:
    docker:
      - image: circleci/node
    steps:
      - checkout
      - run: yarn install
      - run: yarn run build
      - run: npx semantic-release # 使用 npx semantic-release 替代npm publish
workflows:
  version: 2
  test_and_release:
    jobs:
      - test      - release:          requires:            - test # 只有测试完成, 才能执行release          filters:            branches:              only: master # 设置 release只对master生效

同样的, 需要在 circleci 中设置全局环境变量:

github 读写权限: GH_TOKEN
npm 读写权限: NPM_TOKEN

我的包都是基于 npm 的, 故其他的仓库需要对应仓库的token

CI 配置结束。

如果不用 ci, 那么在项目根目录下执行 npx semantic-release 即可。当然 GH_TOKEN, NPM_TOKEN 也都是要的

其他

1 : 花了这么多时间加的高大上插件, 一定要让别人知道, 在 readme.md 下加入如下内容

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

效果如下:

2 : 默认 semantic-release 不会重新 commit 新版本的代码, 所以你 npm install 的包版本永远不会更新, 如何解决使用插件 @semantic-release/git, 在 .releaserc加入

[
  "@semantic-release/git",
  {
    "assets": ["package.json"],
    "message": "chore(🤖):${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
  }
]

3 : preset: angular是什么? angular Commit Message Conventions就是一套 git 生成 release 日志的约定, 如果是开源项目, 使用效果不错，能减少很多工作量, 但是似乎不适合生成业务逻辑的 changelog

效果如下: 是不是效果还凑活

semantic-release-tag-version

结论

相比于用脚本的方式自动发布, semantic-release 更简单、高大上。但也有缺点, 对于内部项目, 不适合, 缺少相关插件，还不如自己写脚本效率和实用

缺陷

不支持多分支工作流, 例如 pre-release, 这对复杂项目及其不友好。幸好release-workflows正在开发, 也许将来某个版本就能支持多分支工作流了，我拭目以待。

Css in Js 之 styled-components

Thu, 13 Dec 2018 23:46:37 GMT

背景

css-in-js 在 react 中非常流行, 本文主要介绍如下几种，基本能覆盖当前前端环境下主流 css-in-js 方案

css-modules
styled-components
jss
radium

css-in-js 优势

所有的样式全部组件化, 符合 react 的设计思维
使用 js 代替其他预处理工具, 充分发挥 js 的能力。
scoped selectors 避免全局变量样式冲突
code split css 代码分割能够按照 js 逻辑分割，不需要编写额外的 css 分割逻辑
webpack 能减少一堆 css 相关 loader

结论

每一种方案都有背后的用户，需要善于分析实际情况，挑选更适合自己的。如果你

css-modules : 非常熟悉 sass,less 等预处理工具的，使用
radium : 真正 css-in-js 粉丝,愿意花大量时间雕琢样式
jss: 喜欢json风格 css 或者体验新库
styled-components: 不善于 sass,less, 但希望有 sass,less 等高级工具方法的用户
不想如此复杂, 其实 css 足够了

最后放个 npm 趋势图：

jss-vs-styled-components-vs-radium

张庆的笔记

typescript window 如何type

背景

解决方案

1) 重新声明 window 类型

2) 局部as

3) xx.d.ts 重写

Reference

webstorm 使用手册

背景

inlay hints

Reference

open graph protocol 使用

标签说明

og:title

og:description

og:url

应用

使用 react-helmet 注入 关联 meta 标签

Reference

iframe media 自动播放

前言

media 自动播放

Reference

typescript is keyword

背景

is 作用

is 的使用

Reference

eth sol dot 对比

背景

现状

eth

sol

dot

对比(2022-05-15)

当前价格

交易速度

核心功能

Reference

clash 实现vpn真正全局代理

背景

设置

TUN TAP 的区别

Reference

css 多语言 伪类(pseudo-class) lang

背景

使用

总结

Reference

window之间消息通讯

背景

使用

targetWindow

message

targetOrigin

transfer

接收

event.origin

event.data

event.source

总结

Reference

aura无法识别海盗船内存条

背景

同步方法

安装 asus aura, icue

安装 icue aura 插件

Reference

typescript type vs interface

背景

interface 只能描述 object

interface 可以重名, type 不可以

interface 可以继承， type 不行

type 能使用计算属性

总结

overscroll禁用过度滚动

背景

非 safari 浏览器

safari

使用 react-helmet 注入关联 meta 标签

css 多语言伪类(pseudo-class) lang