輕鬆釋出 react 元件到 npm

超級大柱子發表於2018-11-13
React元件NPM

痛點

如果你平時想釋出一個自己的 React 元件，發現它並沒有和釋出其他 JavaScript 庫一樣簡單，首先它得對 JSX 進行轉化，並且得使用 babel 把語法轉化為 ES3，還得忽略掉一些專案裡已用到的庫，如 react、react-dom 等等，還得編寫 TypeScript 宣告檔案。

天啊，我只是想把一個元件抽離到 modules 中，為什麼需要配置這麼多瑣事？

這個腳手架就是做以上的事情，它非常簡單，僅僅是幫我們生成了一個已經配置好的webpack的專案，我們編寫完程式碼，編譯併發布到 npmjs.com 即可。

安裝

npm i -g make-react-npm
複製程式碼

使用腳手架建立 React 元件庫

我們使用github倉庫路徑作為引數建立元件庫，這樣別人從 npmjs.com 上也能連結到github倉庫；

建立專案的命令是 make-react-npm <你的github賬戶>/<github倉庫名>。

例子：

$ make-react-npm ymzuiku/new-project
$ cd new-project && yarn
複製程式碼

編寫程式碼時所注意

  • 請把原始碼程式碼編寫在 src 資料夾
  • 請修改 public/index.d.ts 檔案為您專案的 TypeScript 型別宣告, 方便他人使用時會有提示
  • 如果有任何依賴，請安裝到 dependencies , webpage 打包時不會混編 node_modules 的依賴，但是他人安裝此庫時，會自動安裝 dependencies 中的依賴

釋出

  • 前提有一個 npmjs.com 的賬號，在本機登入
  • 設定好 package.json 中的 name 和 version，它們分別是 npm 包名和 包版本號
  • 請確保包可用，共同保證 npm 包的質量

然後使用以下命令釋出

$ yarn build
$ sudo npm publish
複製程式碼

你可以 預覽此庫釋出後在npmjs上的頁面例子

更新 webpack

當前使用的是 webpack4 及 babel7 進行編譯，如果需要擴充套件 webpack 請自行修改 scripts 資料夾中的 webpack 檔案

相關文章