码迷,mamicode.com
首页 > 其他好文 > 详细

项目重构体验一二三

时间:2019-07-31 22:23:17      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:rom   ssas   module   pac   npm   webp   mpi   前言   ups   

前言

不知不觉月底了,都有点不知道自己在忙啥!


最近在重构原来的项目,把一个项目分成了三个项目。 一个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/javascripthttps://eslint.org/docs/rules/ 去查看。


eslint-config-airbnb-baseeslint-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.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的执行顺序呢。

算了,完了,先休息啦。

项目重构体验一二三

标签:rom   ssas   module   pac   npm   webp   mpi   前言   ups   

原文地址:https://www.cnblogs.com/cloud-/p/11279075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!