Use Git Submodule to Publish a React Component Library | Frontend Cookbook 6

羅馬縱走的森林裡

在 Bundle, Publish and Use A React Component Library | Frontend Cookbook 4 裡我們已經試過建立一個 React component library 並把他 publish 到 npm registry 上，但有時候我們可能不想把 library publish 到 npm registry 上，這時候該怎麼辦？

方法其實滿多的，這次我們用 Git Submodule 來做。

frontend-cookbook

首先，frontend-cookbook 是一個已經能用 Rollup 打包的 Component Library Project，從 package.json和 rollup.config.js 中可以看到，打包後的檔案會在 dist/ 裡。

// package.json
{
  "name": "frontend-cookbook",
  "author": {
    "name": "Yes Lee",
    "url": "https://yeslee.me"
  },
  "main": "dist/index.js",
  "license": "MIT",
  "scripts": {
    "rollup": "rollup -c"
  },
  ...
}
// rollup.config.js
export default {
  input: "index.js",
  output: [
    {
      file: pkg.main,
      format: "es",
      sourcemap: true,
    },
  ],
  ...
}
// Folder structure
dist
|- index.js
|- index.js.map
src
|- components
|- index.js
package.json
rollup.config.js

Create an orphan branch

接著利用 orphan branch 的方式 create 一個叫 release 的 branch，只把 README.md 留下後 commit 再 push。

git checkout --orphan release
git reset // unstage all changes
git add README.MD
git clean -df // remove all other untracted files and folder
git commit -m "v1.0.0"
git push -u origin release

Add release branch as a submodule

接著把 release branch 用 submodule 的方式加回 master branch。

git checkout master
git submodule add -b release -- https://github.com/hiiamyes/frontend-cookbook.git release
git commit -m "Add release branch as submodule"
git push

Time to release

最後，準備一份 release.sh script，先進行打包後再把需要的檔案 cp 到 release submodule，commit 後再 push，release branch 就成為一個可以被當作 package 使用的 branch 啦。

// scripts/release.sh
#!/bin/sh
yarn rollup
cp package.json release/package.json
cp README.MD release/README.MD
yes | cp -rf dist/ release/dist/
cd release
git add .
git commit -m 'update'
git push
// package.json
{
  "name": "frontend-cookbook",
  "scripts": {
    "rollup": "rollup -c",
    "release": "./scripts/release.sh"
  },
  ...
}
// Folder structure
release/
|- dist/
  |- index.js
  |- index.map.js
|- package.json
|- README.md
dist/
|- index.js
|- index.js.map
src/
|- components
|- index.js
package.json
rollup.config.js

Install and use the package

因為是用 branch 當作 package，所以 install 的時候 要用 yarn add <git remote url>#<branch> 的方式。

yarn add https://github.com/emq-inc/emq-ui-kit.git#release
import { Loader } from "frontend-cookbook";