“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

The project is too big, there is more than one maintenance team, and the management is relatively isolated, and the development will occasionally affect each other, and the cooperation is not good, how to do? Easy to handle, the project dismantled each maintenance each, we do not affect each other.

The status quo

The whole project consists of three teams: finance team, mobile business team, basic business team,

  • Function page

    Since the previous framework design was ok, the project feature page folder was created by clicking on three large menus, which was a relief.

  • Component library

    This is all placed under Compents, which makes us not know which components are used in which business, which is a bit embarrassing.

  • routing

    Route is good, have their own parent route, but also according to the three menus to create.

  • request

    This, like components, is cumbersome, with several calls to each module, making it difficult to split.

Break up

After some compromise, we finally decided to split the project into five projects.

Because this project has been running for a while, the component library is fairly complete and there are few changes that need to be made. So we upload the library directly to Git and publish the library to NPM. (It’s possible to build your own private library here, but it’s relatively easy to publish directly to NPM because we don’t need to change much.) This way we can use our component library just like any other third-party library

The common administration library was our base library, where we rerouted several other projects together so that users were completely unaware of our split. (This is a 19 year old project, it is now possible to split and adopt a micro front-end framework, but there will be a comparison, which is not discussed here.)

We put the login page in the public library, so that we can download the corresponding project + public library during development. The public library can not be modified, and each team can only change their own project. (For the rest of the project, each team kept the login page for its own project, eliminating the need to access the common library every time.)

The common management library is actually very simple, is the route, request for a merge.

The link between libraries is yarn workspace. NPM link is not used. The reason for YARN link is simple: Yarn workspace resolves dependencies, and dependencies of all packages are installed in node_modules of the root directory, saving disk space and giving YARN more space for dependency optimization.