如何創建和發佈你的第一個React Component的NPM Module

這裡記錄了如何由 “創建>開發>發佈” 一個React Component的NPM Module

原文參考 (Build和Publish):

Building a React component as a NPM module

Publishing a React Component as an NPM module

第一章. 創建

1. 建立npm project(請確保你的project名字在npm中是獨一無二的)

cd xxxx   //先cd到你想建立react project的位置
mkdir dummy-react-npm-module   // 建立project
cd dummy-react-npm-module   //cd進去project directory

2. 執行git init建立git repo，然後繼續

npm init //始初化npm

3. 然後會出現數條問題，作答後便完成了

4. 回到你的project dir,安裝 babel v7 ，這樣可以幫我們把jsx/js代碼轉成ES5，使其在舊瀏覽器中也能使用。(*這裡會使用yarn進行安裝)

yarn add @babel/preset-env @babel/preset-react --dev

5. 建立babel，以設置使用babel v7

touch .babelrc

6. 把這些代碼寫進去 .babelrc

{
    "presets": ["@babel/preset-react", "@babel/preset-env"]
}

7. 建立index.js進行開發

mkdir src
cd src
touch index.js

8. 在index.js中你可以開始建立你的react component

*請先別急著進行開發，等下方全部步驟完成後才回到這裡

import React, { Component } from 'react'; 
export default class DummyComponent extends Component {
  render () {         
    return (<div>I am a dummy react npm module</div>);
  } 
}

9. 修改package.json，把build的指令加進去

"build": "./node_modules/.bin/babel src --out-file index.js"

10. 回到project root dir，執行 yarn build，你的代碼會被transpile：

第二章. 開發

11. 安裝 react 和 react-dom 作為 devDependencies 供開發時使用

yarn add react react-dom --dev

12. 執行pwd找到project的實際路徑(下方將稱為module project)，在第14步中會使用到

例: /Users/user/Projects/dummy-react-npm-module

13. 現在會建立一個react項目(下方將稱為react project)以開發module project

npx create-react-app dummy-app
cd dummy-app

14. 在react project安裝上方的module，後面是輸入module project的路徑

yarn add /Users/user/Projects/dummy-react-npm-module

14a. 這裡插入一個小分岔，你亦可以使用下列指令進行安裝:

在module project的root dir中,輸入:
npm link //建立本地package連結
在react project的root dir中,輸入:
npm link <package-name> //讀取本地package連結
如要從本地移除package連結:
sudo npm rm --global <package-name>

15. 然後使用yarn start起動react project，便完成了

yarn start

16. 日後開發時，需兩個項目同時開啟，

並在module project項目修改後，需要執行yarn build刷新該module。

而react project則因為有hot reload，不用手動刷新。

第三章. 發佈

17. 先從 npmjs.com 註冊一個帳號

18. 在module project建立一個 readme.md 檔案

touch readme.md

19. 打開readme.md ，輸入以下內容，日後你可以再作修改

Dummy react component
==== 
This will be a how to guide for your fellow developers
```
<DummyComponent />
```
etc
===
Thanks

20. 然後開始進行npm發佈，在terminal輸入:

npm adduser

21. 輸入你的帳號資料如username, password, 和email :

22. 進行登入:

npm login

23. 最後發佈你的module:

npm publish

24. 大功告成，你的module將會是你在package.json的項目名稱，如:

https://www.npmjs.com/package/<項目名稱>

日後如要進行發佈，次序是先進行yarn build 然後npm login，npm publish 即可。

如有問題歡迎查詢~謝謝。