前言
不知不覺月底了,都有點不知道自己在忙啥!
最近在重構原來的項目,把一個項目分成了三個項目。 一個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的執行順序呢。
算了,完了,先休息啦。