Note: this article will not say too much basic content, by default, you have the basic skills to build a development environment.

I used Monorepo management mode when MAKING re-Editor rich text editor. In the development process, I think Monorepo is also suitable for the internal organization of projects in the team. Here are the specific methods to share with you for discussion

background

There are several common problems with multi-project development within a team

  1. New projects need to reconfigure a variety of tools, cumbersome, although you can also use scaffolding generation, but later involved in the upgrade of dependency is also troublesome
  2. Dependency cross-references within the project affect the development experience even though there is YARN/NPM link
  3. Configurations such as Babel are expected to be shared by multiple projects

To solve the above problems, it was decided to use LERNA + YARN workspaces within the project.

We used the following project structure to simulate common scenarios within the team to demonstrate the project

  • Two unrelated Web projects
    • Www-a, using ANTD
    • Www-b, use react-bootstrap
  • Three component projects
    • component-a
    • component-b
    • component-c

Their dependencies:

  • WWW – a dependent component – a
  • WWW – dependent component b – b
  • Component-a and Component-b depend on Component-c

Create a project

Create a new folder and initialize Git

Initialize Git
git init 
Copy the code
Initialize the project
$ npm init -f 
If lerna is not installed globally, add NPX before the command
$ yarn add lerna --dev
Copy the code
// To use workspace, add the following content to package.json
"private": true."workspaces": [
    "packages/*"].Copy the code
Initialize lerNA
$ lerna init
Copy the code
// Add the following content to lerna.json to enable YARN workspaces in lerna
{
  "npmClient": "yarn"
  "useWorkspaces": true
}
Copy the code

The next step is to create a package, either manually within the Packages folder or using the lerna command:

$ npx lerna create XXX 
Copy the code

Dependency management

There are basically three dependency installations that you encounter during development

  1. Package dependency: That is, the dependency of a specific package. There are two installation methods: Use Yarn. For details, see Yarn-workspace
# yarn workspace www add react
$ yarn workspace <workspace_name> <command>
Copy the code

Use lerna. For details, see lerna add

# npx lerna add react --scope www
$ lerna add <package>[@version] [--dev] [--exact]
Copy the code
  1. Workspace dependencies: Dependencies within the Mono repo project are cross-referenced
# npx lerna add component-a --scope www
$ lerna add <package>[@version] [--dev] [--exact]
Copy the code
  1. Shared tool dependencies: Tool dependencies such as Babel, ESLint, etc., require shared configuration
# Note: It must be in the project root directory
yarn add @babel/core @babel/preset-env --dev -W
Copy the code

We now extract the reusable content:

  • Code compiled using Babel
  • CSS preprocessing, using PostCSS
  • Eslint, projects use a consistent syntax specification
  • Commitlint, projects use a consistent COMMIT specification

These tools should be installed as usual, with the emphasis on Babel.

The bable configuration file uses babel.config.js, the code is compiled to configure global sharing, and then differentiated by overrides. For example, the project ww-A uses ANTD, which can be configured separately and loaded on demand

const presets = [
  "@babel/preset-env"."@babel/preset-react"
];

const overrides = [
  {
    test: ["packages/www-a"].plugins: [["module-resolver", {
        "alias": { "~": "./src/scripts"}}], ["import", {
        "libraryName": "antd"."libraryDirectory": "es"."style": "css"{}}]],test: ["packages/www-b"].plugins: [["module-resolver", {
        "alias": { "~": "./src/scripts"}}]]},]Copy the code

npm script

Lerna is used to manage projects by writing its own NPM script for each project, such as start build, and then executing it with Lerna.

"scripts": {
   "start:www-a": "lerna run start --parallel --scope www-a --scope component-a --scope component-c"
  },
Copy the code
Execute build command for all packages
$ lerna run build

Execute all packages start commands in parallel
$ lerna run start --parallel 

Copy the code