Verdaccio - Private NPM (2)

大家好，我係J-all Engineer嘅Joe 呀。

今日我地繼續private npm 嘅topic。

---

而呢篇主要係create 一個 reactjs 用嘅node module。

坊間已經有一個叫做create-react-library (Ref: https://www.npmjs.com/package/create-react-library) 嘅project，我地會用佢嚟create module。

---

首先install 咗create-react-library 先

跟住我地就可以run 佢嘅script 嚟create 我地嘅module

答完script 嘅問題之後，會自動generate 成個project folder。

---

Project 入面會有一個src 同一個example folder。

scr 會係我地個module 嘅source code folder，好似平時寫react component 咁寫你要用嘅component 就得。

不過同平時唔同嘅係，src 入面用嘅dependency，可以install 落devDependencies 而唔係 dependencies。

如果有用 separate css file，roll-up 本身係support css 嘅，rollup-plugin-postcss-module 會幫你rename css 做local scope，不過唔知點解佢compile 個css 時識得rename css 入面嘅class，但係唔識rename 相應嘅react component。

折衷嘅方法係改用rollup-plugin-postcss。

只要行npm start，就可以直接build & watch 你個module。

---

然後就係整個example project。

example project 除咗可以做demo 之後，亦都可以用嚟debug 你嘅code同埋方便試新function。

由於我地係用typescript，而create-react-library by default 唔係用typescript 嘅，所以我地要改少少setting 先。

第一步先改file 名，由於example 得幾個file，只要將 App.js & index.js 改做 App.tsx & index.tsx 就得。

然後create 一個 tsconfig.json file，內容如下

(以下sample 係常用嘅setting，為免off-topic，如果唔明就google 下):

第二步係要改 example/package.json 入面嘅script。

要run typescript project 就唔可以用 react-scripts，不過要改都唔複雜，只要換成react-scripts-ts 就ok。

當然需要install react-scripts-ts 落project 度啦。

第三步就係fix 其它問題，例如 index.tsx 入面 import React 要改成 import * as React。

喺terminal 度走去example 個project folder，行 npm start 就會自動打開你個example project。

---

今日寫到呢度先。

點樣publish 去verdaccio 留返下一篇講。