標籤:
簡介
ReactJs由於有FB的支援,得到了社區的極大關注,同時由於ReactJs只希望專一的做好View層次上的工作,所以本身並沒有涉及很多周邊工具。
今天要介紹一款工具,同時包含一個構建項目模板的工具,對於初學者來說,就有了一個可以學習、開發、測試的平台。
Yeoman
官方的介紹是這樣形容的:“Web App的腳手架工具” --- Yeoman的目的是協助使用者更好的啟動項目,提供最好的實踐和工具使使用者保持高生產率。
Yeoman提供了一個產生器的生態系統,並提供了一個“Yeoman的工作流程”,這個工作流程整合了三大部分:
- 腳手架工具Yo
職責:管理組件依賴、記錄構建配置資訊等
項目地址:https://github.com/yeoman/yo
?
- 構建工具Grunt
職責:構建工具,比較流行的有Grunt和Gulp
項目地址:http://gruntjs.com/
http://gulpjs.com/
- 包管理器Bower
職責:包依賴管理工具,避免手動安裝,比較流行的有Bower和npm
項目地址:http://bower.io/
https://www.npmjs.com/
項目構建
以Mac下為例:
1. 啟動terminal,然後進入到指定目錄下:
npm install -g yo
2. 安裝產生器(generator):
npm install -g generator-react-fullstack
3. 構建React-fullstack項目模板:
yo react-fullstack
4. 啟動項目頁面:
npm start
5. 開啟瀏覽器:
模板結構
模板結構最好的就是參照官方給出的內容,這裡就不一一舉例了。
Ract-starter-kit 官方地址:https://github.com/kriasoft/react-starter-kit
. # 根目錄├── /build/ # 編譯輸出目錄├── /docs/ # 項目相關文檔目錄├── /node_modules/ # 3D部分和工具目錄├── /src/ # 代碼來源目錄│ ├── /actions/ # Actions目錄│ ├── /api/ # REST API目錄│ ├── /components/ # React組件目錄│ ├── /constants/ # Constants (action types etc.)│ ├── /content/ # Static content 靜態內容目錄(plain HTML or Markdown, Jade, you name it)│ ├── /core/ # Core components 核心組件(Flux dispatcher, base classes, utilities)│ ├── /decorators/ # Higher-order React components進階別的React組件庫│ ├── /public/ # Static files which are copied into the /build/public folder靜態檔案庫│ ├── /stores/ # Stores contain the application state and logic程式運行時狀態和邏輯倉庫│ ├── /utils/ # Utility classes and functions工具類和方法│ ├── /app.js # Client-side startup script用戶端啟動指令碼│ ├── /config.js # Global application settings全域設定│ ├── /routes.js # Universal (isomorphic) application routes通用的應用程式路由│ └── /server.js # Server-side startup script服務端啟動指令碼├── /tools/ # Build automation scripts and utilities自動構建指令碼及工具│ ├── /lib/ # Library for utility snippets工具提示庫│ ├── /build.js # Builds the project from source to output (build) folder從源碼編譯輸出│ ├── /bundle.js # Bundles the web resources into package(s) through Webpack通過Webpack將資源打包│ ├── /clean.js # Cleans up the output (build) folder清理輸出檔案夾│ ├── /webpack.config.js # Configurations for client-side and server-side bundles配置用戶端和服務端打包工具│ ├── /copy.js # Copies static files to output (build) folder拷貝靜態檔案│ ├── /deploy.js # Deploys your web application發布Web程式│ ├── /serve.js # Launches the Node.js/Express web server啟動服務│ └── /start.js # Launches the development web server with "live reload"啟動開發模式,帶有時時更新│── package.json # The list of 3rd party libraries and utilities3D部分列表└── preprocessor.js # ES6 transpiler settings for Jest ES6的Jest設定
更多資料
@小狼的世界-Yeoman介紹:http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html
Yeoman官方地址:http://yeoman.io/
React學習筆記---項目構建