Lerna入门之管理TypeScript monorepo教程

 更新时间:2022年11月14日 11:50:36   作者:何遇er  
这篇文章主要为大家介绍了Lerna入门之管理TypeScript monorepo教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Lerna 介绍

这是一篇写给 Lerna 初学者的文章,在这篇文章我将从零创建一个 TS 项目,并且使用 Lerna 将项目中的多个包发布到 npm 中

Lerna 是一个使用 git 和 npm 管理多包仓库的工具,它用于管理具有多个包的 JavaScript 项目。lerna 有两种模式:fixed 模式和 independent 模式

fixed 模式

fixed 模式是 lerna 的默认模式,在这种模式下,版本被保存到项目根目录的 lerna.json 文件的 version 字段中。当你运行lerna publish时,如果从上一次发布之后有模块被更新了,被更新的模块将会以新版本发布,有更新的模块才会被发布,没有更新的模块不会被发布(注:如果主版本为 0 或者更新主版本号,会导致所有的模块都被发布,不管模块是否有更新)。在 fixed 模式下你只需要为待发布的模块选择一次版本号,被发布的模块的版本号是一样的。

independent 模式

将 lerna.json 文件的 version 字段设置为independent,这会让 lerna 运行在 independent 模式下,independent 模式需要开发者单独修改每个待发布模块的版本号。

前置条件

全局安装 Lerna

npm install -g lerna

NPM

在这个 demo 中,我使用 Lerna 将包发布到 npm 公有库中,所以需要到www.npmjs.com创建一个 npm 账户.

GIT

Lerna 依赖 git 检查文件改动,自动发布,管理版本号,根据 commit message 自动生成 changelog,所以需要安装 git。

开始动手

我要演示的项目中包含了2个包,结构如下:

创建一个名为 leran-ts-demo 的文件夹,在这个文件中执行

lerna init

这个命令执行完之后,leran-demo 的文件夹中会包含如下的文件:

  • /packages
  • lerna.json
  • package.json

/packages 是一个空文件夹,我将 lerna 要管理的包放在这个文件夹中。

lerna.json 是 lerna 的配置文件,它的内容如下:

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0"
}

Lerna 不会创建 .gitignore,所以我们要自己创建 .gitignore,文件内容下:

node_modules/
lerna-debug.log
npm-debug.log
packages/*/lib
.idea

创建包

在这个 demo 中,lerna 要管理的包是:math-demo 和 request-demo,通过lerna create命令创建包。在仓库的根目录中运行 lerna create math-demo,结果如下:

重复上面的过程创建 request-demo,创建完成之后目录结构如下:

在项目中我们使用 TS 语法写源代码,所以需要安装 typescript,在仓库的根目录中运行 lerna add 命令将 typescript 添加到每个包的依赖中

lerna add typescript --dev

由于在所有的包中都使用了 TS,所有我在仓库中根目录中创建一个公共的 tsconfig.json,内容如下:

{
 "compilerOptions": {
   "module": "commonjs",
   "declaration": true,
   "noImplicitAny": false,
   "removeComments": true,
   "noLib": false,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "target": "es6",
   "sourceMap": true,
   "lib": [
     "es6"
   ]
 },
 "exclude": [
   "node_modules",
   "**/*.spec.ts"
 ]
}

创建完公共的 tsconfig.json 之后,我们还需要给每个包创建它自己的 tsconfig.json,如下:

{
 "extends": "../../tsconfig.json",
 "compilerOptions": {
   "outDir": "./lib"
 },
 "include": [
   "./src"
 ]
}

在为每个包添加 tsconfig.json 之后,我还为每个包创建了 src 目录,src 目录中保存这个包的 TS 源文件,为了让 TS 文件能够被编译成 JS 文件,我还在每个包中的 package.json 中定义的 tsc 脚步,结果如下:

在仓库中根目录下运行

lerna run tsc

上面的命令会运行所有包中的 tsc 脚本

如果一切顺利,我们将把 TS 文件从 src 文件夹编译到每个包的 lib 文件夹中。我们看一下每个包 package.json 中的 directories, files, typings, publishConfig 和 main 属性:

这些对我们来说非常重要,因为它们控制着哪些文件将被推送到NPM,也决定了我们 npm 包的入口。

将代码托管到 gitHub

在 gitHub 创建一个仓库,并且将本地的仓库与远程仓库关联

将包发布到 npm 上

我已经有一个 npm 账户了,现在我只需要在终端上登录 npm

现在,我们已经准备好了项目结构和构建脚本,我将 publish 命令定义到仓库根目录的 package.json 中

{
 "scripts": {
   "publish": "lerna run tsc && lerna publish"
 }
}

在仓库的根目录运行

npm run publish

Lerna 将指导我们完成发布过程,在这个过程中我们需要选择一次包版本,并将 Tag 推送到 Github。如果一切顺利,我们将在结尾看到消息:lerna success 发布了 2 个包。

验证发布成功

在命令行运行

npm info request-demo
npm info math-demo

你将看到相关 npm 的详细信息

写在后面

在这个 demo 中我用的是 leran 的 fixed 模式,你可以改成 independent 模式试试有什么不一样的地方。

以上就是Lerna入门之管理TypeScript monorepo教程的详细内容,更多关于Lerna管理TypeScript monorepo的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript实现弹出模态窗体并接受传值的方法

    JavaScript实现弹出模态窗体并接受传值的方法

    这篇文章主要介绍了JavaScript实现弹出模态窗体并接受传值的方法,涉及JavaScript模态窗体的实现及基于URL的传值操作技巧,需要的朋友可以参考下
    2016-02-02
  • iOS微信H5页面橡皮回弹效果的踩坑记录

    iOS微信H5页面橡皮回弹效果的踩坑记录

    移动端开发时,H5长页面在iOS系统中滑动时,当页面滑动到顶部或底部时,页面还能够上滑或下滑,手指离开屏幕后回弹,这就时橡皮筋效果,这篇文章主要给大家介绍了关于iOS微信H5页面橡皮回弹效果的相关资料,需要的朋友可以参考下
    2021-07-07
  • js更优雅的兼容

    js更优雅的兼容

    对于JS框架开发中的客户端(浏览器)兼容难题,各位想必都不陌生。平常,我们都用if去面对接口不一致以及成堆的bug。然而,这里介绍的方法却可以让兼容更加优雅。
    2010-08-08
  • Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试

    Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试

    偶然发现的,页面中没有引入Prototype和jQuery。控制台中敲$却发现是一个函数。又试着敲$$,也是个function
    2012-02-02
  • javascript获取网页各种高宽及位置的方法总结

    javascript获取网页各种高宽及位置的方法总结

    下面小编就为大家带来一篇javascript获取网页各种高宽及位置的方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript html 静态页面传参数

    javascript html 静态页面传参数

    静态页面中用js获取页面参数的一些属性方法,具体的获取参数,可以搜索本站以前的一些文章。
    2009-04-04
  • el-select加上搜索查询时限制开头空格输入的解决方案

    el-select加上搜索查询时限制开头空格输入的解决方案

    这篇文章主要介绍了el-select加上搜索查询时,限制开头空格输入的解决方案,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • JS实现图片延迟加载并淡入淡出效果的简单方法

    JS实现图片延迟加载并淡入淡出效果的简单方法

    我们大家都知道,对于一个网站最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,作为一个站长我们是千方百计的使用各种技巧来优化图片,但其实有一种简单的方法,只需要几行代码就能达到这种效果。同时还附加一种淡入淡出的显示效果,下面一起来看看。
    2016-08-08
  • 深入浅析javascript继承体系

    深入浅析javascript继承体系

    这篇文章主要介绍了javascript继承体系的相关资料,需要的朋友可以参考下
    2017-10-10
  • Javascript开发包大全整理

    Javascript开发包大全整理

    Javascript开发包大全整理...
    2006-12-12

最新评论