前言

不知不覺月底了，都有點不知道自己在忙啥！

---

最近在重構原來的項目，把一個項目分成了三個項目。 一個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) => {});

參考

worker-loader

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.maxInitialRequeststest: /[\\/]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的執行順序呢。

算了，完了，先休息啦。

轉載于:https://www.cnblogs.com/cloud-/p/11279075.html

總結

以上是生活随笔為你收集整理的项目重构体验一二三的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。