项目重构体验一二三

不知不觉月底了，都有点不知道自己在忙啥！

最近在重构原来的项目，把一个项目分成了三个项目。 一个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://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, 但是，不生效的。