604
使用 Dawn 構建 React 項目
開發一個 React 項目，通常避免不了要去配置 Webpack 和 babel 之類，以支持 commonjs 或 es 模塊及各種 es 新語法，及及進行 jsx 語法的轉義。當然也可以用 create-react-appp 腳手架快速創建一個 react 項目，但與此同時 create-react-app 常常又顯的不太自由。
在配置 webpack 時，看著上百行的 webpack.config.js 是不是很鬧心？為了重用是不是在多個項目間各種 ctrl-c -> ctrl-v，整個配置起來還是稍顯麻煩，對於新手用戶常常更是一頭霧水，事實上，最大化重用和簡化構建配置也是 dawn 的目標之一。
本文是一篇 Dawn 使用入門文章，介紹如何從「零」開始「手動配置」一個基於 dawn 的 react 工程。
一、環境準備（可略過）
# 1. 安裝 NVM
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
# 2. 安裝 Node
nvm install 8.6.0
nvm alias default 8.6.0
# 3. 安裝 Dawn
npm i dawn -g
二、創建項目 & 編寫代碼
創建一個普通的 Node 項目
# 1. 創建項目目錄
mkdir react-demo
cd react-demo
# 2. 初始化 package
npm init
安裝 react & react-dom
npm i react react-dom --save-dev
用你的編輯器，打開項目根目錄，比如 vscode
vscode .
在項目根目錄創建 src 目錄，並在 src 目錄中創建 index.js，並輸入如下代碼
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return <div>
Hello Dawn!
</div>;
}
ReactDOM.render(
<App />, document.getElementById('root')
);
在 src/assets 目錄，並在 src/assets 目錄中創建 index.html，並輸入如下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Dawn!</title>
</head>
<body>
<div ></div>
</body>
</html>
三、添加構建配置
在項目根目錄創建 .dawn 目錄，並在 .dawn 目錄中輸入如下配置
build:
- name: clean
- name: webpack
好了，現在構建一下我們的代碼吧，執行如下命令
dn build
命令執行完畢，會看到項目根目錄多了一個 build 這便是構建結果，簡單到想哭吧。
如上配置，在 build 的 pipeline 中添加了 clean 和 webpack 兩個中間件，在每次執行 dn build 時，pipeline 中的 clean 會清理 build 目錄，然後 webpack 會接著進行構建，並把構構建結果放入 build 目錄。
等一下，想要監聽文件的「實時構建」？想要一個用於開發的 「Dev Server」？想要瀏覽器「自動同步」？
看下邊，配置一下 dev 的 pipeline，在剛剛的 pipe.yml 中加入 dev 配置
build:
- name: clean
- name: webpack
dev:
- name: clean
- name: webpack
watch: true
- name: server
- name: browser-sync
在 dev 的 pipeline 中，我們把 webpack 的 watch 選項打開了，打開後便能監聽文件的變化並進行「實時構建」了，接下來的任務交給 server 中間件，它會在構建啟動後啟動一個靜態的 Web Server，默認情況下會自動選擇一個「可用端口」，不出意外「瀏覽器」已經「自動打開」了。
編輯一代碼試試，browser-sync 中間件會通知瀏覽器實時自動刷新頁麵，在適配不同設備開發時 browser-sync 還會在多個的設備的瀏覽器中同步。
好了，一個基本的基於 dawn 的 react 工程配置好了。文中提到的 webpack、clean、server、browser-sync，可以關注一下相關文檔。
附上一些鏈接:
- 相關文檔（https://alibaba.github.io/dawn/docs/）
- Dawn 主頁（https://alibaba.github.io/dawn/）
- Git Reop（https://github.com/alibaba/dawn）
最後更新：2017-10-17 17:34:46