Lerna 使用教程 -- 开发脚手架的流程和核心命令详解

简介: Lerna 使用教程 -- 开发脚手架的流程和核心命令详解

Lerna 简介

官网:https://lerna.js.org/

Lerna 是一个优化基于 git+npm 的多 package 项目的管理工具

主要用于大幅减少开发脚手架过程中的重复操作,并提升操作的标准化

babel、vue-cli、create-react-app等著名脚手架,都是使用Lerna开发的

Lerna 开发脚手架的流程

准备工作:

注册npm账号,创建组织

打开官网,注册一个npm账号

https://www.npmjs.com/

登录后,创建一个组织(主要用于避免发布后项目名与其他人重复)

输入自定义的组织名后,点 Create 进行创建

组织创建成功,效果如下:

在码云上创建仓库

得到远程仓库地址

https://gitee.com/sunshine39/mycli-test.git

1. 全局安装 Lerna

npm install -g lerna

2. 创建项目

以项目名 mycli-test 为例

git init mycli-test

进入项目目录

cd mycli-test

3. 用 Lerna 初始化项目

lerna init

用 vscode 打开项目,创建 .gitignore 文件,内容为:

node_modules
lerna-debug.log

用于避免将 node_modules 和 lerna-debug.log 上传到 git

设置git全局账号和邮箱(若设置过,则忽略此步)

git config --global user.name "你的git账号"
git config --global user.email "你的git账号绑定的电子邮箱"
 

通过以下命令,可以查看是否设置成功

git config --global --get user.name
git config --global --get user.email
 

4. 用 Lerna 创建包

如创建核心包 cro

lerna create core

会提示输入包的名称,格式为

@组织名/包名
 

组织名为准备工作中,在npmjs.com中创建的组织,之后一直按回车键,最后输入y即可。

再创建一个工具包 utils

lerna create utils

5. 用 Lerna 管理包的依赖

  • 给所有的包安装依赖
    npmlog 为npmjs.com 中已存在的依赖名称。
lerna add npmlog
  • 给指定的包安装依赖
lerna add 依赖名称 包的路径

lerna add npmlog packages/core
  • 卸载指定包的依赖
    core 为包名,inquirer 为依赖名
lerna exec --scope=core  npm uninstall inquirer
  • 清空所有包已安装的依赖
lerna clean

注意事项:此操作删除了各包里的node_modules文件夹,但并没有删除各包里的 package.json 里的 dependencies ,所以还需一一手动删除!

  • 重新安装删除的依赖
    会根据各包中的package.json 里的 dependencies配置,安装对应的依赖
lerna bootstrap
  • 创建项目内部包之间的软链接
    需先在目标包的package.json 里的 dependencies添加配置,再执行
lerna link

例如:在 core 包中,添加 utils 包的软链接,方法如下

在 core 包的package.json 里添加 dependencies 配置

  "dependencies": {
    "@mycli-test/utils": "^0.0.0"
  }

再执行

成功在core包中添加utils包的软链接

  • 执行终端脚本 lerna exec
    如删除所有包中的 node_modules文件夹

在linnux系统中用

lerna exec -- rm -rf node_modules

在windows系统中用

lerna exec -- rd/s node_modules

即 lerna exec – 的用法是对 packages中的每个包都执行相应的终端命令。

若想只对指定包执行相关命令,则需使用

lerna exec --scope 包名 -- 终端命令

lerna exec --scope @mycli-test/core -- rd/s node_modules

则只会删除core包中的 node_modules文件夹

  • 执行npm脚本 lerna run

如执行测试

lerna run test

相当于在每个包中执行一次

npm run test

目前直接执行会报错,因为各包里的package.json里的test对应的命令包含 && exit 1

可以分别修改为

  "scripts": {
    "test": "echo \"run test from core\" "
  },
  "scripts": {
    "test": "echo \"run test from utils\" "
  },

若想只对指定包执行npm命令,则需使用

lerna run --scope 包名 -- npm命令

lerna run --scope @mycli-test/core -- test

6. 用 Lerna 发布脚手架

  • 查看与上次发布的版本之间的变更
lerna changed

  • 查看与上次本地提交之间的变更

执行以下命令完成第一次本地提交

git add .
git commit -m "创建项目"

修改文件 packages\utils\lib\utils.js

执行命令

lerna diff

将代码提交到远程仓库

  • 给本地代码添加一个远程仓库
git remote add origin https://gitee.com/sunshine39/mycli-test.git
  • 将本地代码推送到远程仓库
git push --set-upstream origin master

此处使用 --set-upstream 参数,指定默认推送到远程的master分支,之后的提交直接使用 git push 即可。

命令行登录npm

npm login

按提示依次输入npm的账号、密码、邮箱、一次性验证密码(输入邮箱回车后邮箱里会收到一次性密码验证邮件)

发布前的必要修改

  1. 每个包 的 package.json 中添加
  "publishConfig": {
    "access": "public"
  },
  1. 项目目录下新建文件 LICENSE.md,内容为空即可。
  2. 提交代码推送到远程仓库
git add .
git commit -m "发布到npm前的修改"
git push

发布到npm

lerna publish

按引导,选择 Patch,输入 y 回车即可

发布成功后,在npmjs.com中查看效果

还可以在任意文件夹中尝试下载安装这两个包哦!

npm i @mycli-test/core

 

目录
相关文章
|
2天前
|
JavaScript 前端开发 jenkins
【开发脚手架】系列教程 -1- 脚手架的价值,功能,命令详解,执行原理图解
【开发脚手架】系列教程 -1- 脚手架的价值,功能,命令详解,执行原理图解
10 2
|
8月前
|
缓存 资源调度 JavaScript
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
从零到一nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人家的项目大全,最详细,保姆级
288 0
|
2月前
|
存储 缓存 资源调度
链接、包管理工具、polyrepo、monorepo以及Lerna 工具的使用
链接、包管理工具、polyrepo、monorepo以及Lerna 工具的使用
195 0
|
2月前
NPM 制作命令行工具 - 入门案例
NPM 制作命令行工具 - 入门案例
41 0
|
2月前
|
JavaScript 前端开发 Ruby
NPM 制作命令行工具 - 进阶辅助库
NPM 制作命令行工具 - 进阶辅助库
29 0
|
9月前
|
存储 JavaScript Java
【已开源】针对 jar 和 vue 一键自动化部署工具,界面好,操作简单!
easy-jenkins是一款对vue和jar的部署工具,操作简单,实行一键部署,内部结构采用流水线形式架构,每次部署,时时提供部署过程,部署记录,界面友好简洁,使用方便,符合用户常规操作
|
12月前
|
Web App开发 存储 缓存
前端MonoRepo实战:pnpm+nx搭建MonoRepo项目
之前大多数是理论知识,能让我们知道pnpm 和nx 是什么,但是具体要到项目实战就有点懵,不知道从而下手,下面我们就一步步开始搭建pnpm+nx的Monorepo仓库。
1193 0
|
JavaScript 前端开发 iOS开发
《智能前端技术与实践》——第1章 开发环境配置——1.3 安装 npm 包管理工具
《智能前端技术与实践》——第1章 开发环境配置——1.3 安装 npm 包管理工具
104 0
|
存储 JavaScript 前端开发
针对 jar 和 vue 的一键自动化部署工具,界面友好,操作简单(已开源)2
针对 jar 和 vue 的一键自动化部署工具,界面友好,操作简单(已开源)2
|
消息中间件 JavaScript 小程序
针对 jar 和 vue 的一键自动化部署工具,界面友好,操作简单(已开源)
针对 jar 和 vue 的一键自动化部署工具,界面友好,操作简单(已开源)

热门文章

最新文章

  • 1
    流量控制系统,用正则表达式提取汉字
    25
  • 2
    Redis09-----List类型,有序,元素可以重复,插入和删除快,查询速度一般,一般保存一些有顺序的数据,如朋友圈点赞列表,评论列表等,LPUSH user 1 2 3可以一个一个推
    26
  • 3
    Redis08命令-Hash类型,也叫散列,其中value是一个无序字典,类似于java的HashMap结构,Hash结构可以将对象中的每个字段独立存储,可以针对每字段做CRUD
    26
  • 4
    Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
    27
  • 5
    S外部函数可以访问函数内部的变量的闭包-闭包最简单的用不了,闭包是内层函数+外层函数的变量,简称为函数套函数,外部函数可以访问函数内部的变量,存在函数套函数
    24
  • 6
    Redis06-Redis常用的命令,模糊的搜索查询往往会对服务器产生很大的压力,MSET k1 v1 k2 v2 k3 v3 添加,DEL是删除的意思,EXISTS age 可以用来查询是否有存在1
    30
  • 7
    Redis05数据结构介绍,数据结构介绍,官方网站中看到
    22
  • 8
    JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
    20
  • 9
    JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
    20
  • 10
    定义好变量,${age}模版字符串,对象可以放null,检验数据类型console.log(typeof str)
    19