輕鬆釋出 react 元件到 npm

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

如果你平時想釋出一個自己的 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
複製程式碼

你可以ofollow,noindex">預覽此庫釋出後在npmjs上的頁面例子

更新 webpack

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