Component Template

此模組是生成套件的框架，請依照以下方式。

Step 1 - 安裝模組
Step 2 - 修改package.json
Step 3 - 修改Demo HTML的Title
Step 4 - 修改、新增Compoent
- ./src/index.js
- ./src/components/Demo.js
Styles
更改host與port
Script
Github Demo頁面設定
- Demo頁面網址
NPM
- 發布至NPM
  - 登入npm帳號
  - 發布
- 安裝
更新版本號參考表

Step 1 - 安裝模組

npm i

Step 2 - 修改`package.json`

請修正以下項目 (括號為範例)

{
  "name": "套件名稱 (component-template)",
  "version": "版本 (0.0.1)",
  "description": "套件說明",
  "repository": {
    "type": "git",
    "url": "Git網址 (https://github.com/whlshy/component-template.git)"
  },
  "author": "作者 (WHL)",
  "keywords": [
    "可以",
    "輸入",
    "你要的",
    "關鍵字",
    "例如 (react)"
  ],
  ...
}

Step 3 - 修改Demo HTML的Title

./src/www/index.html：

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{"請輸入Title (Component Template - WHL)"}</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

Step 4 - 修改、新增Compoent

Component的存放路徑都集中在./src/components，如需要新增或修改compoent請集中於此。

原Component入口為./src/components/Tabs.js，可自行刪除檔案或修改檔案名稱與內容。

`./src/index.js`

更改後修正./src/index.js的套件引入路徑與輸出名稱：

import ChromeTabs from './components/Tabs'
export default ChromeTabs

`./src/components/Demo.js`

此為展示與開發頁面的測試Component，可以從這裡引入開發Component來呈現。

範例：

import React from 'react'
import Tabs from './Tabs'

export default function Demo(props) {
  return (
    <Tabs />
  )
}

Styles

css、styl均存放在./src/styles，需使用時直接在component引入即可。

範例：

import '../styles/Demo.css'

更改`host`與`port`

./webpack.dev.js：

devServer: {
  host: "localhost", // 可以改成網址 (10.xx.xx.xx)
  port: 7777, // 更改port e.g. 8888
},

Script

npm start 開發用
npm build 發布前須先執行build
npm web 如需展示在github請執行這個指令後再發布

Github Demo頁面設定

Settings -> Page -> Branch

選擇分支 (main) 把資料夾設定成docs後按下儲存 (Save)

Demo頁面網址

https://{account}.github.io/{Repository}/

範例：

https://whlshy.github.io/component-template/

NPM

發布至NPM

發布前須先申請NPM帳號

登入npm帳號

npm adduser

發布

更新版本同時也記得修改package.json中的version喔！

npm publish

安裝

npm i 你的模組名稱@version --save

範例：

npm i react-chrome-tabs@2.0.1 --save

更新版本號參考表

程式碼狀態	階段(Stage)	規則	範例	用途
第一次釋出	New product	從 1.0.0 開始	1.0.0	第一次釋出套件
bug 修正且向後相容	Patch release	增加第三碼	1.0.1	微小的修正或更改
新功能增加且向後相容	Minor release	增加第二碼且第三碼重設成 0	1.1.0	新的功能出現或修正
可能會有無法向後相容	Major release	增加第一碼且第二、三碼重設成 0	2.0.0	可能有巨大的改變，可能無法向後相容

Made by WHL

whlshy/component-template