如何打包 CRA 專案並建立不透過第三方服務即可供別人使用的專案


Posted by u88803494 on 2022-01-23

前言

在打包,大家想到的第一件事情,就是要使用 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,而這個部分我還也未研究,等我有機會研究到後,我會再來開一篇紀錄一下。


#babel #javascript #React #package #Github







Related Posts

匯入小工具 (1) - 談點開始寫程式前的準備

匯入小工具 (1) - 談點開始寫程式前的準備

[自己架網站] 上傳檔案到雲端主機 + 更改域名

[自己架網站] 上傳檔案到雲端主機 + 更改域名

迴圈 for ..in

迴圈 for ..in


Comments