1 | {{name}}
|
2 | =====
|
3 |
|
4 | [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) [![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg?style=flat-square)](https://github.com/conventional-changelog/standard-version)
|
5 |
|
6 | *新芽網路前端開發架構*
|
7 |
|
8 | ## 簡介
|
9 |
|
10 | 經由 `react-starter` 快速產生的專案,內建 `react` 開發用環境,此樣板是為了 component demo 或是製作 react library 使用。
|
11 |
|
12 | ## 資源介紹
|
13 |
|
14 | 使用 `webpack` 做建置工具,搭配 `eslint`、`react-storybook` 與 `jest` 開發,支援 `ES6`、`stage-3` 語法。
|
15 |
|
16 | ## 如何開始
|
17 |
|
18 | - 安裝 nodejs v6 以上的版本
|
19 | - 安裝套件: `npm i` or `yarn`
|
20 |
|
21 | #### 踏出第一步
|
22 |
|
23 | 啟動開發 server
|
24 |
|
25 | ```
|
26 | npm start
|
27 | ```
|
28 |
|
29 | 便可在 <http://localhost:3000> 看到本地伺服器~
|
30 |
|
31 | 啟動 storybook server
|
32 |
|
33 | ```
|
34 | npm run storybook
|
35 | ```
|
36 |
|
37 | 便可在 <http://localhost:8000> 看到 storybook 開發伺服器~
|
38 |
|
39 | #### npm script
|
40 |
|
41 | - **npm start**: 啟動 storybook 開發伺服器
|
42 | - **npm run dev**: 啟動開發 server
|
43 | - **npm run demo**: 使用 `demo` 參數打包專案,部署在測試機。
|
44 | - **npm run build**: 使用 `production` 參數打包專案,部署在正式機。
|
45 | - **npm run lint**: 跑 eslint 跟 stylelint 檢查 coding style
|
46 | - **npm run storybook**: 跑 storybook
|
47 | - **npm test**: 跑 jest 測試
|
48 |
|
49 | ## 專案架構
|
50 |
|
51 | 以下是這個專案的各資料夾定義
|
52 | - src
|
53 | + **components**: 開發 component 的資料夾
|
54 | + images
|
55 | - **config**: 設定環境變數和調色盤
|
56 | - **storybook**: 存放 storybook 的設定檔
|
57 |
|
58 | > 0.8.0 之後 component 的 stories 和 test case 移至各自的 component 資料夾裡面
|
59 |
|
60 | ## 參數設定
|
61 |
|
62 | #### 環境變數
|
63 |
|
64 | 以下是 `npm run dev`, `npm run build:demo`, `npm run build` 各自對應的環境變數
|
65 |
|
66 | script | NODE_ENV | process.env.NODE_ENV
|
67 | ---------- | ---------- | ----------------------
|
68 | dev | devlopment | devlopment
|
69 | build:demo | devlopment | devlopment
|
70 | build | production | production
|
71 |
|
72 |
|
73 | #### CSS 標準色
|
74 |
|
75 | CSS 所用的全域變數,可以於 `config/palette.js` 設定整個網站的標準色等。
|
76 |
|
77 | ```javascript
|
78 | export default {
|
79 | standard: '#999',
|
80 | secondary: '#DDD',
|
81 | darkBlack: '#404040',
|
82 | };
|
83 | ```
|
84 |
|
85 | #### CSS Media Query 設置
|
86 |
|
87 | CSS 所用的全域變數,可以於 `config/media.js` 設定整個網站的 media query。
|
88 |
|
89 | ```javascript
|
90 | export default {
|
91 | '--phone': '(width < 600px)',
|
92 | '--small-tablet': '(900px > width >= 600px)',
|
93 | '--tablet': '(1200px > width >= 900px)',
|
94 | '--desktop': '(width >= 1200px)',
|
95 | };
|
96 | ```
|
97 |
|
98 | ## Contribution
|
99 |
|
100 | 此專案 commit message 使用 angular format ,並使用 [commitizen](http://commitizen.github.io/cz-cli/) 輔助產生 commit message
|
101 |
|
102 | - 加入修改的檔案 `git add .`
|
103 | - 產生 commit message `npm run commit`
|
104 |
|
105 | ## Release
|
106 |
|
107 | 此專案使用 [standard-version](https://github.com/conventional-changelog/standard-version) 輔助 release 流程,自動產生 `CHANGELOG.md` 和 提升版本號(提升 major version 依據是否有 `feat` 來判斷)
|
108 |
|
109 | - `npm run release`
|
110 |
|
111 | 可以自己決定 提升 patch, minor or major
|
112 |
|
113 | - `npm run release -- --release-as minor`
|
114 |
|
115 | **Warning**: 第一次 release 請下
|
116 |
|
117 | - `npm run release -- --first-release`
|