Recently, lerNA, a multi-package management tool, was introduced for the first time to a small program framework used within the development company

This article will describe the process of managing projects using LERNA, using a personally developed calendar component as an example.

Maybe everyone will ask, you this calendar component is not written by vue 🐴 to lerna management what.

Component development was conceived with support for users of multiple frameworks in mind, hence react/ Vue/applet versions.

A preliminary lerna

Back to the topic, let’s take a look at the directory structure of the project.

Following the default lerna project structure, we will put all the packages we need to manage into the packages folder and write lerna configuration in the root directory lerna.json.

The structure in packages folder is shown in the figure above, which represents that I use LERNA to manage 4 packages at the same time, namely the calendar component developed based on VUE/React/native wechat small program, and the core package responsible for processing the core logic of the calendar.

Calendar components mentioned in the article, the author of an ancient period of the calendar components to do a optimization, optimization is the focus of the extraction and easy to read.

In the process of extraction, it was found that the generation of calendar data, no matter whether the component was developed by VUE, React or even small program components, needed this logic. So we can take it a step further and bundle this logic directly into dependency packages that can be invoked by all types of calendar components.

The core logic implementation is no longer repetitive, and the basic and the previous article on the same. About the calendar view layer React and small program implementation, basically is to “translate” the Vue implementation into the framework corresponding writing method. If you are interested, you can click on the lower portal ↓↓

React component implementation(Github Portal)

The React practice is special in two ways:

  • Use useMemo to replace computed in vUE implementation
const isFirstMonth = useMemo(() = > selectedMonth === 0);

const isLastMonth = useMemo(() = > selectedMonth === 11);
Copy the code
  • Replace nextTick in vUE implementation with useLayoutEffect

useLayoutEffect(() = > {

    setBlockHeight(document.querySelector('.__main__block-head').offsetWidth + "px");

}, [calendarData]);

Copy the code

Micro channel small program component implementation(Github Portal)

The applet itself is developed in a similar way to the Vue puzzle, which is basically a painless port. Instead of using querySelector to get the width of a calendar block, you have to use the applet’s own APIcreateSelectorQuery.

But in the style piece is not quite the same, wechat small program only recognize WXSS file with the same name as WXML, do not support the import of style, so in the core logic packaging at the same time execute a miniapp-script.js, CSS file copy to the miniAPP directory and change its suffix name.

Lerna practice

In combination with the above description, we can only think that LERNA is a package management thinking, which changes the original single-project vs. single-dependency model into single-project vs. multi-dependency model, and does not see any other substantial help from it.

However, when I was ready to publish the four dependency packages to NPM, I encountered a thorny problem. The packaging methods of the four dependencies were completely different. When I released, I had to CD each package to install, build, version and other mechanical operations. (It doesn’t.)

First, let’s look at the configuration of lerna.json, the first step in creating the Lerna project.

{

    "version": "independent"."packages": [

        "packages/*"]."npmClient": "yarn"."useWorkspaces": true."command": {

        "publish": {

            "allowBranch": "master-next"}}}Copy the code

The version field is used to define the version number of the LERNA project. If this field declares the version number, all internal subprojects will be published according to this version number. However, you can choose to proceed to an alternative release mode, in which each subproject maintains its own version number, by leaving the version number empty and filling in Independent as in the above configuration.

The packages field is used to declare the directory of functions. Only subitems in the array are retrieved by LERNA.

The npmClient field is used to declare the package management tool used by LERNA to execute instructions. The default is NPM. Yarn is declared in the configuration, so you can enable the workspaces mode. Workspaces is a feature of YARN. After using workspaces, most of the dependency packages are promoted to node_modules in the root directory. There are no repeated dependencies in node_modules of each subproject.

The command field changes the parameters built into the LERna directive. The specific use

Next, the author through a calendar component packaging and release of the whole process, to give you an intuitive display of the access to LERNA after the gameplay.

lerna ls

Gets a list of subprojects within a local project

lerna bootstrap

Dependencies of the entire project in the installation directory

lerna changed or lerna diff

To confirm the scope involved in this revision, LERNA will list all the subitems that have been changed, so that we can review the changes in time

lerna run (any script)

All sub-projects execute a certain command in sequence. The build command shown in the figure is equivalent to the YARN build in each sub-project

lerna publish

Batch NPM release of the changed subprojects, as shown in the figure below. After input instructions, you can specify the version you want to release for each project

lerna clean

If you want to reinstall the dependencies in a subsequent iteration, you can start by executing the clean directive, which will clean up all node_modules under the project

Small talk

After two years of working on calendar components off and on, we finally have a rough prototype, and each framework has an out-of-the-box NPM package:

@mykurisu/calendar-component-vue

@mykurisu/calendar-component-miniapp

@mykurisu/calendar-component-react

If you need to install directly, any questions can be sent to @myKurisu/Calendar for feedback.

If it’s a style issue, I suggest forking the project and changing the styles in core, then changing the configuration in package.json, or even publishing it to your own private package. In addition, IF I have time, I will update multiple calendar skins to make it truly out of the box.

Finally, if this project is helpful to you, please click @mykurisu/ Calendar star, and the subsequent updates will be pushed to you in time.