search

gracekrcx / weekly-notes

4 stars 0 forks source link

（筆記）reusable component #101

Open gracekrcx opened 3 years ago

gracekrcx commented 3 years ago

目標

讓 components 被不同的專案引用

package vs Git submodules

Git Submodule 好處

  1. 不需改寫現有的 react 檔案

package 好處

  1. 更新 package 方便，只需要 npm upgrade
  2. 套件的管理更有一定脈絡（版號）
  3. 只需引入需要的 component
  4. 共用的檔案不會在各自的專案被勿改
  5. 一開始就不用擔心會下載到重複的 module 因為 package 在發布時經過 Minify、Uglify

需考慮的點：

  1. 必要動作：(1) 打包 (2) public 專案架構是否是適合發布成 package 的架構
  2. 要改寫匯出點的 index.js (config 裡的 input: "src/index.js")

也可以說當把檔案包成 dist 後 可以有幾條路，去發佈 package

  1. Public publish Creating and publishing scoped public packages
  2. Private publish Creating and publishing private packages
  3. Verdaccio
  4. Use git submodule (用 git submodule 把某一個分支當成 package 的家) Use Git Submodule to Publish a React Component Library | Frontend Cookbook 6 --> Script 裡，指定路徑，去執行 sh 檔案

相關名詞解釋

(npmjs.com) npm registry :watermelon:

目前解讀 npm registry 就是如果你想把 package 放在 npm 讓 everyone 下載，就必須先去註冊一個資料，讓 npm 可以解讀一些 package info

  1. link The free npm Registry has become the center of JavaScript code sharing, and with more than one million packages, the largest software registry in the world.
  2. link CLI documentation 的解釋

實作分享文章： Bundle, Publish and Use A React Component Library | Frontend Cookbook 4

Verdaccio :watermelon:

Verdaccio 是什麼？ Verdaccio is a simple, zero-config-required local private npm registry. 目前解讀 verdaccio 是讓你輕鬆架一個自己的，類似線上 npm registry 的套件

實作分享文章： verdaccio verdaccio gitHub Day 27 - 三周目 - 五分鐘建立私有 NPM: verdaccio [筆記] 建立自己的 npm, 以npm Orgs跟Verdaccio為例 [通过verdaccio搭建私有的包管理器]

Git submodules :watermelon:

  1. link
  2. Git Submodule 介紹與使用
  3. Git Submodule 用法筆記
  4. https://stackoverflow.com/a/7813286

create-react-library :watermelon:

CLI for creating reusable, modern React libraries using Rollup and create-react-app. 使用 Rollup and create-react-app 快速產生一個 library

ES6 Modules and CommonJS :watermelon:

[試著把切版專案升級到 gulp4.0 吧] Day06 來自 gulp 的 hello world：JavaScript 模組化方案 有張對照圖 JS 中的模块化方案

Webpack and Rollup :watermelon:

  1. 可以使用 Webpack 或 Rollup 打包 package
  2. tsdx 是 formik 用來打包套件的 package TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.
  3. 有用的 youtube How To Create React Component Library Setup | 2020 | #1 https://github.com/suprim12/react-ui 就照個這個 base 把測試的 rollup component 弄出來
  4. Build a React Component Library with Ant Design and Styleguidist 使用 Ant Design, react, webpack 做 library，可以成功打包專案的檔案

npm link :watermelon:

  1. How do I uninstall a package installed using npm link?

遇到的問題

  1. 如何下 git submodule update --init --recursive 指令 如果沒有用類似 Jenkins 的工具，可以寫在 shell script
  2. 可以使用 npm 指令去執行 git 嗎？ 上版時 DevOps 告訴你沒有 .git 可以使用，可以透過 yarn install 的方式把相關的 repo 都安裝完成嗎？ ---> 結論: npm install 是下載 npm 的 module，npm-install 有很多種方式，但不是執行 git 指令，如果是直接寫在 script 那應該還是會有 .git 找不到的問題 (fatal: not a git repository (or any of the parent directories): .git (看起來 git submodule update 是會去執行 .gitmodules 這隻檔案)
"script":{
  "pre-install": "git submodule update --init --recursive"
}

// "scripts": {
//   "git": "git add . && git commit -m"
// },

or

"devDependencies": {
 "test": "git submodule update --init --recursive",
}

// "dependencies": {
//   "my-ssh-test-dependency": "git+ssh://git@github.com/xxooccdd/ssh-test.git#master"
// }
  1. 上版時遇到了 Jenkins 無法順利下載 Git submodules 裡的檔案，錯誤顯示無法找到此專案的 username，最後的解決方法是用 Access Tokens 去組下載的 url stackoverflow 上類似的錯誤 unable to checkout git submodules in jenkins
  2. Git error: RPC failed; result=22, HTTP code = 404 Git error: RPC failed; result=22, HTTP code = 404
  3. 如果專案不只引入一個 submodules，那會不會在 npm install 時下載了重複的 module? https://stackoverflow.com/a/52298274 https://stackoverflow.com/a/61662370 Local dependency in package.json how to specify local modules as npm package dependencies

參考文章

利用 shell script 快速產出前端專案交付上版檔案 Day 27 - 三周目 - 五分鐘建立私有 NPM: verdaccio React 元件開發指南

npm install private repositories by dependency in package.json

npm install private github repositories by dependency in package.json How to install an npm package from GitHub directly? Installing private Git repositories through npm install in Docker

gracekrcx commented 3 years ago

npm dependencies For example, these are all valid:

{ "dependencies" :
  { "foo" : "1.0.0 - 2.9999.9999"
  , "bar" : ">=1.0.2 <2.1.2"
  , "baz" : ">1.0.2 <=2.3.4"
  , "boo" : "2.0.1"
  , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
  , "asd" : "http://asdf.com/asdf.tar.gz"
  , "til" : "~1.2"
  , "elf" : "~1.2.3"
  , "two" : "2.x"
  , "thr" : "3.3.x"
  , "lat" : "latest"
  , "dyl" : "file:../dyl"
  }
}

在 dependencies 用 file 是什麼意思？

dependencies 是這個專案有用到的 package file 是，安裝此 path 下的相依 package

參考文章： NPM使用Local Modules

gracekrcx commented 3 years ago

Bundle, Publish and Use A React Component Library | Frontend Cookbook 4 文章裡提到： 因為這是個 React Component Library，而且只會被用在使用 Webpack Bundler 的 Project，所以這邊我們只用 esm format 做 Output。 ---> 這句話感覺像是，不需要是 CJS 的格式，因為只會用在 client react 上面

gracekrcx commented 3 years ago

rollup+antd构建npm包 Ant Design + rollup

Build a Modern JS Project - #5 Rollup with CJS, ESM & UMD 蠻完整的一個課程

The complete guide to publishing a React package to npm 把完整的步驟寫出來了

Your custom React component 也是一個蠻完整的課程

gracekrcx commented 3 years ago

David Wells - Building a self-documenting component library for your company