The big difference with this article is that there will be a detailed COMMIT at each step to help you implement the code

Knowledge of Lerna, code building and Dumi is linked at the end of this article

github

Base Dumi scaffolding initialization project

  • Create a directory 
    mkdir dirName && cd dirName
Copy the code
  • Scaffolding initialization project 
    yarn create @umijs/dumi-lib --site
Copy the code

Dumi scaffolding itself does not support lerna mode, so we need to initialize it with Lerna (lerna initialization first, dumi will overwrite part of package.json configuration).

Access lerna

  • Install LERNA globally 
    npm i -g lerna
Copy the code
  • Initialize the 
    lerna init
Copy the code
  • Modify lerna. Json 
    {..."npmClient": "yarn"."useWorkspaces": true.// Use YARN workspaces
  "version": "independent" // Use a standalone version
}
Copy the code
  • Modify the package. The json 
    {..."workspaces": ["packages/*"],}Copy the code

Create subpackages based on LerNA

Because yarn and LerNA have many overlapping functions, we use yarn to handle dependency issues and LerNA to handle release issues. Do what you can with Yarn

Jest relies on Yarn to bootstrap the project, and on Lerna for running the publish command(s).

  • Delete root directory SRC (demo created by dumi scaffolding)
  • Create subpackages (Community good Practices @ project name/subpackage name for easy management on NPM) 
    Lerna create @cubee/components lerna craete @cubee/utilsCopy the code

Improve the sub-package code and documentation

  • Add subcompartment dependencies, @cube/ Components to @cube/utils 
    // The version number must be added otherwise an error will be reported (lerna is not added) yarn workspace @cubee/components add @cubee/[email protected]Copy the code
  • Write component code, demo code and documentation

At this point, run yarn yarn start and you should see that the document site is working properly

Recommended readingDumi document(Including document routing, reference components in demo, etc.)The code works fine, but the TS in the demo still displays an error

This is because we haven’t built yet and TS can’t find the code in the package.json configuration entry file

Build based on father-build

Father is dumi’s packaging utility, installed when Dumi initializes the project. Rollup is a component packaging tool based on rollup and Babel, as described in the documentation. Here we are only packaging based on Babel

  • Modified. Fatherrc. Ts 
    Export default {esm: 'Babel ', PKGS: ['utils', 'components'], //Copy the code
  • Modify the subpackages package.json respectively 
    {..."module": "es/index.js"."typings": "es/index.d.ts"."files": [
      "lib"."es"]}Copy the code
  • Re-open the file, and TS will no longer report an error (sometimes the import statement will be overwritten to make TS look for the target file again)

Release based on LERna

Congratulations on finally getting to the last step and we’re going to use Lerna to publish and lerna publish will do two things

  1. Changelog generation, changes need to publish sub-package version, push code and tag to the remote repository
  2. Build the code and publish it to NPM

We also need to do the following

  • Start by pushing the code to a Git remote repository
  • You need to add an organization on the NPM website to hold scoped packages

  • Configuration lerna. Json
{..."command": {
    "publish": {
      "registry": "https://registry.npmjs.org/" // Configure the NPM address
    },
    "version": {
      "conventionalCommits": true."message": "chore(release): publish" / / modify}}}Copy the code
  • Modify the subpackages package.json respectively
{..."repository": {
    "type": "git"."url": "https://github.com/bitsu567/cubee"}},Copy the code
  • Login NPMnpm login
  • releaselerna publish

Then you can reference it in your project! In order not to pollute the NPM environment, the test package can build the NPM environment based on Verdaccio, or delete the project within 72 hours as much as possible

reference

  • Why is modern front-end engineering increasingly dependent on Monorepo
  • Monorepo workflow based on LERna and Yarn Workspace
  • Best practices for lerna+ YARN Workspace + MonorePO projects