项目重构体验一二三
Posted cloud-
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目重构体验一二三相关的知识,希望对你有一定的参考价值。
前言
不知不觉月底了,都有点不知道自己在忙啥!
最近在重构原来的项目,把一个项目分成了三个项目。 一个socket的BFF,一个http的BFF,当然还有一个就是纯UI项目。
BFF层
拆分后的项目都采用的是TypeScript重写的。
http的BFF和scoket的BFF本身太多说的, http的BFF除了使用http-proxy-middle中间件外,也没什么,也许有人就说,你这个其他使用nginx就完事了。 这个家家有本难念的经。 因为这个http的BFF有权限检查,数据聚合,数据过滤,第三方API等请求。
此外,唯一要说的就是tslint,因为tslint要逐渐退出历史的舞台了。 我们使用eslint来检查typescipt。 这就的安装@typescript-eslint/parser
和@typescript-eslint/eslint-plugin
最后大致的样子就是
"extends": [
"airbnb-base",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"settings":
"import/resolver":
"node":
"extensions": [
".ts",
".js"
]
,
"rules":
,
"globals":
"document": false
,
可以看到,上面采用的eslint-config-airbnb-base
规则集合,另外TypeScript也是有自己的规则的,具体的规则可以在https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/docs/rules看到。 而关于airbnb的规则可以到https://github.com/airbnb/javascript与https://eslint.org/docs/rules/ 去查看。
eslint-config-airbnb-base
与eslint-config-airbnb
规则集是有很大区别的,自己去百度哈。
具体参考:
@typescript-eslint/eslint-plugin
VScode下搭配ESLint、typescript-eslint的代码检查配方
ESLint+Prettier统一TypeScript代码风格
UI项目 (webpack + react + typescript)
在UI项目重构中,遇到的问题就要多一些啦。
TypeScript 中使用Web Woker
出定义一个自定义模块, 编写worker, 外部引用。
// typings/custom.d.ts
declare module "worker-loader!*"
class WebpackWorker extends Worker
constructor();
export default WebpackWorker;
// Worker.ts
const ctx: Worker = self as any;
// Post data to parent thread
ctx.postMessage( foo: "foo" );
// Respond to message from parent thread
ctx.addEventListener("message", (event) => console.log(event));
// App.ts
import Worker from "worker-loader!./Worker";
const worker = new Worker();
worker.postMessage( a: 1 );
worker.onmessage = (event) => ;
worker.addEventListener("message", (event) => );
参考
TypeScript 分包
大致思路是第三方库分离成一个vendor,常用的工具或者组件分离为一个common。当然你可以使用test属性来自定义。
mode: "production",
plugins: [htmlStringReplacePlugin, optimizeCssAssetsPlugin],
optimization:
minimize: true,
splitChunks:
automaticNameDelimiter: "-",
cacheGroups:
vender:
name: false,
enforce: true, // ignore splitChunks.minSize, splitChunks.minChunks, splitChunks.maxAsyncRequests and splitChunks.maxInitialRequests
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 10,
filename: "vender.[hash].js"
,
common:
name: false,
minChunks: 2,
minSize: 0,
filename: "common.[hash].js"
;
其次,我们要对路由进行动态加载, 在新版本的React,已经支持React.lazy。
webpack有专门的guid Lazy-loading, 但是,不生效的。
TypeScript 开发总结作者有提到
compilerOptions:
module: "esnext",
,
这里就要牵扯到 loader的执行顺序呢。
算了,完了,先休息啦。
以上是关于项目重构体验一二三的主要内容,如果未能解决你的问题,请参考以下文章
用户体验与响应式字体二三事|rem单位与flexible.jsrpx单位与css媒体查询
用户体验与响应式字体二三事|rem单位与flexible.jsrpx单位与css媒体查询