Skip to main content

4-30

1 styled-componets的createGlobalStyle会被覆盖​

复现：导入antd.css，会覆盖createGlobalStyle的样式

解决方案：

官方文档是这样说的：

At this time we do not recommend using @import within cGS due to some issues with how browsers process @import via the CSSOM APIs. Instead it's best to place these in your core index.html file (generated or static) within a typical <style> tag.

所以，将应该在index.html中导入antd.css，而不是通过import方式导入

[1] https://styled-components.com/docs/faqs#note-regarding-css-import-and-createglobalstyle

[2] CreateGlobalStyles Rendered After Component Styles #3146.https://github.com/styled-components/styled-components/issues/3146

1 styled-components无法使用useTheme?​

在5.0.1之后，才支持useTheme，所以需要升级到5.0.1及之后

2 如何删除二维码中间的icon？​

思路​

解码-> 编码

将二维码内容解码后，再生成一个新的不带icon的二维码

关键：二维码解码器

[1] 草料二维码.https://cli.im/deqr

3 antd.css污染全局样式​

该问题无法解决

[1] Remove global Styles #9363.https://github.com/ant-design/ant-design/issues/9363

4 mysql指定端口号登陆​

mysql -u root -P 3307 -h 101.200.152.192 -p

5 Mac m1 docker 安装mysql​

有两个坑​

  • M1芯片是arm64架构，而mysql镜像并不支持该架构，但mysql/mysql-server支持
  • 启动mysql之后，需要配置权限，否则可能连接不上数据库，或者连接上了，没有部分数据库

步骤​

第一步：安装mysql/mysql-server

docker pull mysql/mysql-server:latest

第二步：创建并启动MySQL服务容器

docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root -d mysql/mysql-server

docker run --name mysql -p 3307:3306 -e MYSQL_ROOT_PASSWORD=root -d mysql/mysql-server

第三步：登录数据库

docker exec -it mysql bash

mysql -u root -p
# 输入密码123456

第四步：配置权限

mysql> CREATE USER 'root'@'%' IDENTIFIED BY 'root';
mysql> GRANT ALL ON *.* TO 'root'@'%';
mysql> flush privileges;

mysql> ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '123456';
mysql> flush privileges;

[1] Mac m1 docker 安装mysql.https://www.jianshu.com/p/eb3d9129d880

6 ts导出类型书写方式​

// index.tsx

export type { ActionItem } from './types'
// 注意不要export * from './types'

因为枚举类型无法导出，导出后使用会报 undefined 枚举类型会因为循环引用而无法导出

// types.tsx

import { ReactNode } from 'react'

export enum ActionState {
  RECEIVE,
  EDIT,
  SEND,
  DELETE,
  ADD_TO_METAMASK,
}

export type ActionItem = {
  icon: string
  action: 0 | 1
  title?: ReactNode | undefined
  color?: string
}

7 cra5与lingui搭配​

问题：cra5与lingui搭配，会导致无法正确导入.po文件​

解决方案​

利用craco配置webpack

module.exports = {
  webpack: {
    configure: (config, { env, paths }) => {
      config.module.rules.push({
        test: /\.po/,
        use: [
          {
            loader: '@lingui/loader',
          },
        ],
      })

      return config
    },
  },
}

[1] unable to load resources with create-react-app v5 #1195.https://github.com/lingui/js-lingui/issues/1195

8 rpc是什么？​

问题一：rpc是什么？是一个协议？框架？概念？​

rpc (remote process call) 是一种概念，远程过程调用，有很多实现案例，例如：grpc协议

rpc与之对应的是本地调用

问题二：rpc和http协议的关系？​

从广义上看，http协议是rpc概念的具体实现者

rpc的实现，可以用http，也可以用http2，或者其他传输协议

问题三：grpc和http协议的关系？​

grpc是根据rpc概念，并基于http2实现的协议

[1] HTTP 的本质？HTTP 和 RPC 的区别？.https://www.jianshu.com/p/fe5ccfc5d7bd

问题四：http协议和http2协议的区别呢？​

TODO

[1] 半小时搞懂 HTTP、HTTPS和HTTP2.https://segmentfault.com/a/1190000022662058

9 create-react-app配置多环境​

开发、生产、测试

示例项目：https://github.com/ginlink/cra-env

[1] 原来 React 项目多环境打包是如此的简单.https://juejin.cn/post/6844904015528984583

[2] Adding Custom Environment Variables.https://create-react-app.dev/docs/adding-custom-environment-variables

10 自动生成changelog​

TODO

11 如何判断是空对象、空数组？​

分两步，1.区分对象和数组 2.判断是否为空

第一步：区分​

通过 isPrototypeOf 区分

Array.prototype.isPrototypeOf([]); // true
Array.prototype.isPrototypeOf({}); // false

Object.prototype.isPrototypeOf([]); // true
Object.prototype.isPrototypeOf({}); // true

通过toString 区分

Object.prototype.toString.call([])   //["object Array"]
Object.prototype.toString.call({})   //["object Object"]

ES6，通过 isArray 区分

Array.isArray([])  //true
Array.isArray({})  //false

第二步：判断为空​

// 数组
arr.length === 0

// 对象
Object.keys(obj).length === 0

[1] JavaScript 判断空对象、空数组的方法.https://cloud.tencent.com/developer/article/1743491

12 ts中type和interface的区别​

相同点：可声明、可扩展、可实现

不同点：

1.基本类型别名、联合类型、元组​

type可以描述一些别名

ts的一些类型

// 联合类型
command: string[] | string

// 交叉类型
T & U

// 元组
const tom: [string, number] = ['Tom', 25]

2.声明合并​

interface可以声明合并

3.动态属性​

Type 可以使用 in 关键字动态生成属性，而 Interface 的索引值必须是 string 或 number 类型，所以 Interface 并不支持动态生成属性。

type HZFELanguage = "JavaScript" | "Go";
type HZFEProjects = {
  [key in HZFELanguage]?: string[];
};

const hzfeProjects: HZFEProjects = {
  JavaScript: ["xx", "xx"],
};

[1] TypeScript 中的 Interface 和 Type Alias.https://febook.hzfe.org/awesome-interview/book3/js-ts-interface-type

13 eslint配置完了不生效怎么办？​

运行一下eslint，如果配置有报错，请修改配置

npx eslint --fix ./src/components/Box/index.stories.tsx

14 如何配置jest+ts​

第一步：装包

yarn add -D jest jest-environment-jsdom ts-jest @types/jest

第二步：配置

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/.storybook/'],
  // setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
  transform: {
    // "^.+\\.svg$": "<rootDir>/svgTransform.js",
  },
  testEnvironment: 'jsdom',
}
// package.json

{
  "scripts": {
    "test": "jest"
  }
}

问题一：jest-environment-jsdom是什么？jsdom又是什么？​

jest-environment-jsdom是jest的运行环境，可以是dom或者node

jsdom是一个纯净的浏览器实现，一个示例：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

总结

设置jest的执行环境为jsdom，那么就提供了jest测试dom的环境

[1] jsdom.https://github.com/jsdom/jsdom

问题二：setupFilesAfterEnv: setupTests.js 表示什么？​

设置jest测试前的环境，示例：

import "@testing-library/jest-dom";
import "jest-styled-components";

15 Can't import the named export 'framer-motion' from non EcmaScript module​

原因​

在使用storebook的时候，无法处理framer-motion的mjs文件

解决方案​

webpack配置

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "themeprovider-storybook/register"
  ],
  framework: "@storybook/react",
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto"
    });

    // Return the altered config
    return config;
  },
}

注意：storebook的相关配置都在 <rootDir>/storebook/ 目录下，

一般main.js中是一些配置，而preview.js中是一些环境相关的内容，比如主题、全局环境等

16 rust server无法启动在vscode中​

原因​

插件干扰

解决方案​

步骤一：删除相关插件，例如：rust-analyzer

步骤二：重启vscode

附：rust crate(货箱)的地址​

https://crates.io/

与https://npmjs.com/类似