lerna@v7+与pnpm管理与发布monorepo项目

前提：这里的lerna版本使用的是7以上的版本。该版本有许多的命令变更：
比如：lerna link、lerna bootstrap、lerna add等命令的移除

1. 安装lerna与pnpm

npm install pnpm -g
npm install lerna -g

2. 初始化lerna项目

可以新建项目或者使用已有的项目

lerna init // 初始化lerna仓库

修改package.json。定义版本号与项目名称

修改lerna.json。其他设置可以参考Lerna官网

{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "version": "independent", // 每个子项目使用独立的版本号
  "npmClient": "pnpm", // 设置npm工具，默认为npm,也可以设置成yarn
  "private": true // 防止根项目被发布
}

设置pnpm工作区文件，yarn和npm不需要设置
根目录新建pnpm-workspace.yaml文件，并且如下设置。可以使用2种方式设置，推荐第二种

# 该方式配置也可以
# packages:
#   - 'packages/common'
#   - 'packages/test1'
#   - 'packages/test2'
#   - 'packages/test3'
packages:
  - 'packages/**'

初始化子项目，在每个子文件夹下执行pnpm init，注意，每个子项目的package.json的name字段要与文件夹的名称一致。这里以pnpm init 代替。实际工作可以直接引入真正的项目。结果目录如下：

3. 安装项目依赖

前面的内容供初始化。这里以已经搭建好的仓库做演示。只是把假的项目全部切换成了真正的vue项目
项目目录如下：

pnpm安装依赖。这里不需要再像老版本一样使用lerna bootstrap来提升依赖了

pnpm install

4. 如何在子项目下引用公共模块（重点）

有公共子模块common。注意main字段的设置必须是对应真实的文件。

index.js导出一个测试组件mybutton

import mybutton from './src/components/mybutton'

export {
  mybutton
}

在子项目下引用该button需要在package.json的依赖中添加。

并且需要执行一次pnpm install,这时候在如图文件可以看见如下内容：

在lernaV7以前的版本需要手动执行lerna link命名。在新版本中已经整合到install 命名中了
在引入的项目中直接import该内容就可以使用了

5. lerna的缺点以及优化方案

权限管控：因为所有的代码都在一个大仓里面。因此如果需要对仓库的权限做不同的管理。就无法做到。并且当子项目过多的时候就会导致仓库体积巨大。
优化方案：使用git submodule的方式外链仓库。新建一个子文件夹与要引入的项目同名。并且在根目录执行

git submodule add <项目地址> packages/<项目名称>

根目录会增加如下文件。同时引入的项目会带有一个s。如图：

代码也会自动拉取，如果重新拉的大仓代码。引入的项目没有代码，执行如下命令。就可以拉取代码了

git submodule update --init --recursive

大仓上传到github之后引入的项目只是一个链接

远程子仓的代码更新和平常更新一样行，但是大仓需要对子仓的commit id更新信息进行提交

6. 发布到npm

发布分为源码发布和打包发布
需要先登录npn，使用如下命令直接指定登录地址。好处是一般我们本地的镜像地址都是不是官方的地址，而是淘宝镜像之类的。这样则不需要去修改本地的npm registry，否则你需要修改本地npm的registry，然后在发布成功之后再次修改会原来的地址。如果你本地的地址就是官方的地址也可以不需要指定登录地址。直接执行npm login

npm login --registry=https://registry.npmjs.org

同时需要配置需要发布的包的发布地址，在package.json中配置。否则会跟随你本地npm的registry。这里我们的需求是发布到官方的npm，因此都指定为npm的官方地址

  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  }

登录成功之后，执行如下命令就源码发布成功了。

lerna run build
lerna publish

如果报错没有权限，检查要发布的包的name是否其他人已经在npm发布了。
如果子包使用了es6引入文件，需要给子包的package.json添加如下配置。默认是commonJS

 "type": "module",

如果要打包发布需要安装rollup，打包js一般是使用该库。在跟目录下执行。rollup-plugin-vue以及其他的相关插件可以按需添加

pnpm install rollup rollup-plugin-vue -D -w

然后给要发布到npm的根目录项目添加rollup.config.js文件，写入如下内容

import vue from "rollup-plugin-vue";

export default {
  input: "./index.js",
  output: [
    {
      file: "dist/index.js",
      format: "es",
    },
  ],
  plugins: [vue()],
};

并且修改package.json的文件入口，keyword可以设置检索关键词

  "main": "dist/index.js",
  "keywords": [
    "common",
    "wdnmd",
    "rsndm"
  ],

在执行打包和发布命令就OK了
如果子项目的package.json配置有private:true，则该项目不会发布到npm