開始之前我們先建立一個 Package 專案，主要步驟包含：

• Create Project
• Check your babel settings
• Add compile script
• Add index.js And Component

簡單來說，就是直接將 components 資料夾內的項目用 babel 打包。

Step 1 Create Project

透過 create-react-app 建立專案，my-project 的部分可以寫上你的 project name，注意必須全小寫。

npx create-react-app my-project

Step 2 Check your babel settings

安裝下列項目

package.json

{
  ...
  "devDependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "cross-env": "^7.0.2"
  }
}

Step 3 Add Compile Script

--out-dir lib 的部分是輸出的資料夾名稱。執行後會建立lib資料夾。

package.json

{
  ...
  "scripts": {  
    ...
    "clean": "rm -rf ./dist",
    "compile": "yarn clean && cross-env NODE_ENV=production babel src/components --out-dir lib --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__"
  }
}

Step 4 Add index.js and components

將 index 指向發布的 library.

index.js

export * from './lib';

加入一個測試的 Component

src/components/HelloText/index.js

import React from 'react';

const HelloText = props => {
  return (
    <div>Helloooo</div>
  )
}

export default HelloText;

建立索引

src/components/index.js

export { default as HelloText } from './HelloText';
export * from './HelloText';

執行打包

yarn compile

跑完後就可以在專案中看到lib資料夾了，然後再將他們 commit 到 git 上，public 的部分之後會講解。以下是從我的 git 拉 package 的範例：

package.json

{
   ...
   "dependencies": {
    ...
    "tera-ui": "git+https://github.com/teraui41/teraui-v0.git"
  },
}

使用

只要 import 就好了～

import { HelloText } from 'tera-ui';

const Demo = props => {
  return (
      <HelloText />
  )
}

export default Demo;

小結

看了很多建立Package的文章，不過感覺做了很多對我來說沒有很必要的事，所以試著找一個比較精簡一點的做法。未來如果有需要擴充或是更複雜的release流程再來研究一下怎麼處理最好。可以到我的github（頂部連結）追蹤最新進度喔！