前言

在打包，大家想到的第一件事情，就是要使用 webpack 或是類似的工具才可以，而如果我們使用 create-react-app 來開啟一個新專案，我們勢必得要 eject 才可以對嗎？
不，其實不用，我們可以單純透過 babel 就可以打包了，甚至可以不用透過第三方的服務，像是 npm.js，我們的專案就可以打包提供別人使用。
會有這個發現主要是因為公司專案的需求，我才發現原來打包不一定需要 webpack 等工具，甚至不用發布就可以直接提供給其他 Repository 使用了。

所以接下來就進入主題吧！

初始化打包

這部分就先假裝自己已經有個可以打包的專案了！或是可以參考這篇建立專案，而這篇其實也是作為該篇的延續，所以後續也會有一些很細節的部分出現。

• 在 src 目錄下建立新資料夾 packages。

• 在 packages 目錄下建立新檔案 index.jsx，這個檔案是整個打包的入口點。
  App.jsx 可以留下，作為寫好的 packages 本地引入測試使用。

建立測試 component（可選）

• 在 packages 目錄下建立新資料夾 components 並且建立一個資料夾 Test 以建立 Test 的 Component，在其資料夾底下建立 index.jsx 跟 Test.jsx。

* index.jsx:

export { default } from './Test';

Test.jsx：
import React from 'react';

const Test = () => (
  <div>
    Test component
  </div>
);

export default Test;

• 建立完成 Test component 後， 在 src/packages/index.jsx 的檔案寫入如下內容：

import Test from './components/Test';

export { Test };

不過這邊如果你用 airBnb 的 rule 的話可能 ESlint 會要求要有 default。所以可以加上 default，先寫 export { Test as default, Test };，等以後有第二個之後，就可以把 Test as default 的部份移除。

• 然後在 App.jsx 引入試試看：

import React from 'react';

import { Test } from './packages';

const App = () => (
  <div>
    MMRM network module
    <Test />
  </div>
);

export default App;

設置 Babel

• 成功後就，可以開始安裝 babel 以編譯成 package：

yarn add -D @babel/cli @babel/preset-env @babel/preset-react cross-env

• 新增 babel.config.json

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

• 接著設定 package.json ：

...

  "main": "dist/index.js",
  "files": [
    "dist"
  ],

  ...

  "scripts": {
    ...
    "compile": "cross-env NODE_ENV=production babel src/packages --out-dir dist --copy-files",
    "postcompile": "git add dist",
  },

main 是打包的 entry point，安裝後依賴這個來當作進入點
files 是指定哪些是打包出去的資料夾
script 是搭配 lint-staged 一起運作，這樣可以在打包 commit 的時候自動幫我們 compile 接著一起 commit 進去。當然如果沒設置，就需要自己每次都手動 compile 了。

husky 跟 lint-staged 相關設定

• 打開 .husky/pre-commit 的檔案，修改 npx lint-staged 的行為：

rm -rf dist && npx lint-staged && yarn compile

package.json 新增 ：

"ignore": [
    "node_modules",
    "dist",
    "*.config.js"
  ]

這樣可以避免 compile 的時候還去偵測到 babel.config.js

• 調整 package.json 整體的順序如下圖所示：

• 完成。

如何使用呢？

首先把這個專案推到 GitHub 上，然後我們都會取得一串的 GitHub url，這篇用 ssh 作為範例。
只要把這個網址加上一些料就可以了。

ssh://git@github.com:[使用者]/[專案名稱].git#branch_name

接著就將這一串安裝即可
yarn add ssh://git@github.com:[使用者]/[專案名稱].git#branch_name

只需要前面加上 ssh:// 接著在最後面用 # 加上分支名稱，甚至你可以開發到一定程度之後，直接改 branch_name 來跨 repo 測試。

思考

我會覺得其實這樣的打包不是很正規。這邊是我自己的想法，應該是部署上去的時候，由 CI/CD 的流程來協助將這些打包內容放到特定的 branch 才對。

但我目前公司還沒有在使用 CI/CD，而這個部分我還也未研究，等我有機會研究到後，我會再來開一篇紀錄一下。