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

0回の閲覧
  • Facebook - White Circle
  • Twitter - White Circle
  • Instagram - White Circle

© 2019 J-all All Rights Reserved.

J-all

JOIN,

JOYFUL,

JAPAN

J-all Evessa