- J-all
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 留返下一篇講。