使用lerna+father来优化托管在git\npm上的多package代码库

499 阅读3分钟

准备工作:全局安装lerna+father(也可以安装在项目中)

yarn global add lerna
或
npm i lerna -g

yarn global add father
或
npm i father -g

第一步:初始化仓库。

mkdir lib-package # 新建目录
npm init # 初始化仓库

第二步:初始化lerna框架

yarn add lerna -S (也可以全局安装)
lerna init

使用yarn的workspaces模式,修改package.json文件,新增以下内容

# package.json 文件加入
"private": true,
"workspaces": [
    "packages/*",
    "packages/@admin/*"
],
"publishConfig": {
    "access": "public"
 }


# 修改生成的lerna.json文件,加入
"useWorkspaces": true,
"npmClient": "yarn"

配置完成,以下是lerna命令说明:

www.lernajs.cn/

  • lerna create

创建一个包,name包名,loc 位置可选

    # 创建一个包gg默认放在 workspaces[0]所指位置,这里的workspaces指上边配置的package.json中的workspaces
    
    lerna create gg

image.png

    # 创建到指定的目录下 (创建一个包,名称为test在packages/@admin目录下)
    # 注意:执行此命令前需要配置package.json
    lerna create test @admin

image.png

注意:这里可能会报错lerna ERR! Error: Command failed with exit code 1: git config --get user.name

image.png

解决方案:先设置一下本地邮箱,再重复lerna create

     git config user.name <你的名称>
  • lerna bootstrap

默认是npm i,因为我们指定过yarn,so,run yarn install,会把所有包的依赖安装到根                node_modules.(会在根目录下安装所有依赖)

  • lerna list

列出所有的包,如果与你文夹里面的不符,进入那个包运行yarn init -y解决

  • lerna add [@version] [--dev] [--exact]

  • --dev devDependencies 替代 dependencies
  • --exact 安装准确版本,就是安装的包版本前面不带^, Eg: "^2.20.0" ➜ "2.20.0"

增加本地或者远程package做为当前项目packages里面的依赖

# Adds the module-1 package to the packages in the 'prefix-' prefixed folders
lerna add module-1 packages/prefix-*

# Install module-1 to module-2
lerna add module-1 --scope=module-2

# Install module-1 to module-2 in devDependencies
lerna add module-1 --scope=module-2 --dev

# Install module-1 in all modules except module-1
lerna add module-1

# Install babel-core in all modules
lerna add babel-core
  • lerna clean

删除所有包的node_modules目录

  • lerna changed

列出下次发版lerna publish 要更新的包。

  • lerna publish(注意发布之前需要登陆npm 账号 npm login)

特点:会打tag,上传git,上传npm。 如果你的包名是带scope的例如:"name": "@gp0320/gpwebpack",那需要在packages.json添加

"publishConfig": {
    "access": "public"
}

image.png

image.png

  • lerna import

导入本地已经存在的包

  • lerna run

运行某个包的某个指令,例如:

lerna run < script > -- [..args] # 运行所有包里面的有这个script的命令 
$ lerna run --scope my-component test
  • lerna exec

运行任意命令在每个包

$ lerna exec -- < command > [..args] # runs the command in all packages
$ lerna exec -- rm -rf ./node_modules
$ lerna exec -- protractor conf.js
lerna exec --scope my-component -- ls -la
  • lerna link

项目包建立软链,类似npm link

补充:在其包之间互相引用的办法

 ## 需要切换到需要安装其它包的当前包下
 第一步:先列出所有包
 lerna list
 第二步:安装所需要的包
 lerna add @admin/xxx --dev

配置father(umi-library)打包

第一步:在根目录新建.fatherrc.js文件,并加入以下内容

export default {
  target: 'node',
  entry: 'src/index.js',
  cssModules: false, // 是否开启cssModules
  extractCSS: false, // 是否提取css为单独文件
  esm: 'rollup', // ems格式
  cjs: 'rollup', // cjs格式
  lessInBabelMode: true // bable模式下less编译
}

第二步:新建src目录,src/index.js文件

说明:这个index.js主要是用来统一暴露你写完的包