阅读 178

【lerna实践】使用lerna管理多个项目monorepo

lerna playground

本例项目演示地址

lerna官网

lernaGithub

lerna 起步

Lerna 2.x 是推荐的开始版本lerna.org

npm install --global lerna
复制代码

接下来我们将创建一个新的 git 存储库:

git init lerna-repo
cd lerna-repo
复制代码

创建一个新的 lerna 存储库或将现有存储库升级到 Lerna 的当前版本。

lerna init
复制代码

初始化成功如下所示:

    lerna notice cli v4.0.0
    lerna info Creating package.json
    lerna info Creating lerna.json
    lerna info Creating packages directory
    lerna success Initialized Lerna files
复制代码

创建包 package

lerna create mylerna  // 创建的包名 mylerna  
复制代码

默认已经帮我们生成以下文件:

__test__       //单元测试
lib           //入口lib主文件
package.json // 配置文件
README.MD   // readme
复制代码

安装依赖

以安装依赖包 yargs 举例三种情况下的依赖安装;

lerna add yargs 
// 此时它会安装到所有的packages下面的项目中;

lerna add yargs  packages/mylerna
// 将依赖包安装到packages下的指定项目中;

npm i yargs
// 将会安装到learn 根目录依赖中;

复制代码

安装成功如下所示:

info cli using local version of lerna
lerna notice cli v4.0.0
lerna info Adding yarn in 1 package
lerna info Bootstrapping 2 packages
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna success Bootstrapped 2 packages
复制代码

添加依赖

通过lerna create 我们在packages下创建多个包: clicreateinit

并在初始化时配置packages.json中name字段分别命名为:

@frontendplayer/cli、@frontendplayer/init、@frontendplayer/create
复制代码

image.png

为避免冲突@frontendplayer 为我们自定义npm包组织名称;

在包名为mylerna中添加依赖:

"dependencies": {
    "yargs": "^17.1.1",
    "@frontendplayer/cli":"^0.0.0",
    "@frontendplayer/init":"^0.0.0",
    "@frontendplayer/create":"^0.0.0"
  }
复制代码

link 链接依赖

在我们的mylerna包中执行依赖链接

 lerna link 
复制代码

此时node_modules新增 @frontendplayer文件,包含 cli/create/init 软链接 image.png

全局link

npm link  
复制代码

执行成功如下所示:

added 1 package, and audited 3 packages in 4s

found 0 vulnerabilities
复制代码

查看全局 link 结果

npm root -g
// windows下:C:\Program Files\nodejs\node_modules

复制代码

对应目录多出一个@frontendplayer的链接包

image.png

publish 发布上线

lerna version // 查看版本
lerna publish // 发布 
复制代码

首次发布需要将项目初始提交到git与远程仓库建立连接;

以下以 npm 公服为列:

Organization 创建组织

点击登录并创建npm组织

例:创建组织frontendplayer image.png

创建成功: image.png

publishConfig 修改为公服

将需要发布到公服组织的package.json,publishConfig字段改为如下所示:

   "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org"
  },
复制代码

npm login 登录 npm

确保已经 npm 登录成功

npm login 
复制代码

image.png

version选择版本

Lerna 项目有两种模式:Fixed/Locked mode (default) | Independent mode,他们对应包版本号管理的两种方式。

Fixed/Locked mode (default)

这模式下所有包的版本同步一个主版本号,即 lerna.json 里的 version

{
  "version": "0.0.0"
}
复制代码
复制代码

Independent mode

该模式下,每个包可以独立维护自己的版本号,如果要指定独立运行模式,在 lerna.json 里指定 version 配置如下:

{
  "version": "independent"
}
复制代码

演示项目为固定模式,此时packages下的所有包都统一升级为:^0.1.3,如下所示: image.png

发布成功:

Successfully published:
 - @frontendplayer/cli@0.1.3
 - @frontendplayer/create@0.1.3
 - @frontendplayer/init@0.1.3
 - @frontendplayer/mylerna@0.1.3
lerna success published 4 packages
复制代码

image.png

查看 npm 公服 frontendplayer

image.png

项目规范

通过eslintprettiereditorconfig等工具规范代码风格,保证代码质量;

eslint -统一代码质量

eslint 是一个插件化可配置的javascript 语法规则和代码风格的检查工具

  • 代码质量问题
    • 使用方式可能有问题
  • 代码风格问题
    • 风格不符合一定的规则
  npm i eslint --save-dev       
复制代码

.eslintrc.js

核心配置如下:

module.exports={
    extends:['eslint:recommended'],
    parserOptions:{
        ecmaVersion:2017,
        sourceType:'module'
    },
    rules:{

    },
    env:{
        node:true,jest:false
    }
}
复制代码

更多配置详见文档eslint

.eslingignore

忽略检查目录

__tests__
复制代码

tips 如果vscode可自行安装插件

image.png

Prettier -统一代码风格

Prettier 主要解决代码风格问题,以统一固定的格式输出代码风格;是一个有主见的代码格式化工具;

npm i prettier eslint-plugin-prettier --save-dev
复制代码

修改.eslintrc.js

修改配置eslintrc 中的plugins和rules属性,使得prettier和eslint混合使用;

module.exports = {
  extends: ["eslint:recommended"],
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module",
  },
  plugins: ["prettier"], // 关闭和eslint 冲突的规则;走prettier风格
  rules: {
    "prettier/prettier": ["error", { endOfLine: "auto" }],
  },
  env: {
    node: true,
    jest: false,
  },
};

复制代码

创建.prettierrc文件

根目录创建.prettierrc ,并配置相关常见格式化规则;

{
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 200,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "semi": false
  }
  
复制代码

tips 如果vscode可自行安装插件 image.png

editorconfig 编辑器配置

帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码风格

不同的开发人员,不同的编辑器,有不同的代码风格,EditorConfig用来协调团队开发人员之间的及样式规范化的一个工具;

  • 说明
    • Unix 系统中,每行结尾只有换行,即 \n LF(line Feed)
    • Windows 系统中,每行结尾是换行回车,即\r\n CR/LF
    • Mac 系统里,每行结尾是回车 ,即\r CR(Carriage Return)

根目录创建.editorconfig ,并配置编辑器统一规则;

root=true

[*]
indent_style=space
indent_size=2
end_of_line=lf
charset=utf-8
trim_trailing_whitespace=true


[*.md]
trim_trailing_whitespace=false

复制代码

tips 如果vscode可自行安装插件 image.png

规范总结

开发过程中通过统一的代码风格和规范,在不同的编辑器环境中,保持统一的风格,有利于代码的维护和代码质量的保证;

参考命令

项目初始化

命令说明
lerna init初始化项目

创建包

命令说明
lerna create创建package 包
lerna add安装依赖
lerna link链接依赖

开发和调试

命令说明
lerna exec执行shell脚本
lerna run 'command'执行npm命令 'command'
lerna run 'command' --scope 'packageName'执行具体某个packageName下的npm命令'command'
lerna clean清空依赖
lerna bootstrap重新安装依赖

发布上线

命令说明
lerna version修改版本号
lerna change查看上个版本以来的所有变更
文章分类
前端
文章标签