微前端-qiankun小知识点（杂）

前言

本文记录一下学习qiankun过程中，学习到的一些小知识点。

package

single-spa

官网摘要：
Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。 使用 single-spa 进行前端架构设计可以带来很多好处，例如:

• 在同一页面上使用多个前端框架 而不用刷新页面 (React, AngularJS, Angular, Ember, 你正在使用的框架)
• 独立部署每一个单页面应用
• 新功能使用新框架，旧的单页应用不用重写可以共存
• 改善初始加载时间，迟加载代码

jest

测试框架
官网

dumi

Documentation Generator of React Component

father-build

Library toolkit based on rollup and babel.

Features
✔︎ 基于 docz 的文档功能
✔︎ 基于 rollup 和 babel 的组件打包功能
✔︎ 支持 TypeScript
✔︎ 支持 cjs、esm 和 umd 三种格式的打包
✔︎ esm 支持生成 mjs，直接为浏览器使用
✔︎ 支持用 babel 或 rollup 打包 cjs 和 esm
✔︎ 支持多 entry
✔︎ 支持 lerna
✔︎ 支持 css 和 less，支持开启 css modules
✔︎ 支持 test
✔︎ 支持用 prettier 和 eslint 做 pre-commit 检查

levenary

import levenary from 'levenary';
 
levenary('cat', ['cow', 'dog', 'pig']);
//=> 'cow'

lint-staged

代码规范、只检查暂存区的文件
Run linters on git staged files

np

A better npm publish

npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

prettier

Prettier is an opinionated code formatter.

rimraf

A rm -rf util for nodejs

umi-plugin-hire

A umi plugin for insert a side tip for hire

postcss

Transforming styles with JS plugins
PostCSS 是一个允许使用 JS 插件转换样式的工具

PostCSS 是个什么鬼东西？

源码

• 链式执行生命周期

function execHooksChain<T extends ObjectType>(
  hooks: Array<LifeCycleFn<T>>,
  app: LoadableApp<T>,
  global = window,
): Promise<any> {
  if (hooks.length) {
    return hooks.reduce((chain, hook) => chain.then(() => hook(app, global)), Promise.resolve());
  }

  return Promise.resolve();
}

• createElement

支持 WebComponent 的，使用WebComponent ；不支持的，直接用createElement

• JS沙箱

有两种方式，一种基于 Proxy 实现，一种基于 diff 方式实现的沙箱

Error

• 仓库demo跑不起来

用 yarn install ，不能用 npm install

• yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_P
  olicies。

• 进入 powershell
• set-ExecutionPolicy RemoteSigned
  执行策略更改
  然后再次执行命令

配置文件

.browserslistrc

配置兼容浏览器，用于其他的插件适配
npx browserslist

> 1% 全球1%使用的浏览器
last 2 versions 浏览器的最新两个版本

browserslist/browserslist-example

browserslist使用手册

其他

慢慢补充中。。。