lerna 笔记

[gnosis23]

lerna

组件库需要使用 lerna 管理，好处是 A互相引用，B发版管理。

教程

• https://github.com/reggi/lerna-tutorial
• React + Storybook + Lerna 构建自己的前端UI组件库
• React 组件库框架搭建
• 使用lerna优雅地管理多个package

命令

# 初始化
lerna init

# 链接相关引用
lerna bootstrap

lerna publish --skip-git --force-publish *

本地调试

# 到对应包下面执行，记得先 build
cd packages
cd your-module
npm link

# 到需要引入包的地方执行
# 会在 node_modules 目录下软连接一个 your-module 文件夹
npm link your-package

然后在对应文件下引入即可

import YourPackage from 'your-package'

打包

可以用 webpack 或 rollup ，我使用 webpack 。

打包成可以被 webpack 识别的格式，如

const path = require('path');

module.exports = {
  mode: 'production',
  entry: path.resolve('src/index.js'),
  output: {
    path: path.resolve('dist'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  externals: [
    'react'
  ],
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

[gnosis23]

安装包

安装包

lerna add axios --scope=package1

bootstrap 原理

分析相应 package.json 里面的依赖， 1）如果发现在 packages 里面，就会使用软连接。 2）否则的话 npm install