?? 使用 Dawn 快速搭建 React 項目！

01-31

開發一個 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. 安裝 NVMncurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bashnn# 2. 安裝 Nodennvm install 8.6.0nnvm alias default 8.6.0nn# 3. 安裝 Dawnnnpm i dawn -gn

二、創建項目 & 編寫代碼

創建一個普通的 Node 項目

# 1. 創建項目目錄nmkdir react-demoncd react-demonn# 2. 初始化 packagennpm initn

安裝 react & react-dom

npm i react react-dom --save-devn

用你的編輯器，打開項目根目錄，比如 vscode

vscode .n

在項目根目錄創建 src 目錄，並在 src 目錄中創建 index.js，並輸入如下代碼

import React from react;nimport ReactDOM from react-dom;nnfunction App() {n return <div>n Hello Dawn!n </div>;n}nnReactDOM.render(n <App />, document.getElementById(root)n);n

在 src/assets 目錄，並在 src/assets 目錄中創建 index.html，並輸入如下代碼

<!DOCTYPE html>n<html lang="en">nn<head>n <meta charset="UTF-8">n <meta name="viewport" content="width_=device-width, initial-scale=1.0">n <meta http-equiv="X-UA-Compatible" content="ie=edge">n <title>Hello Dawn!</title>n</head>nn<body>n <div id="root"></div>n</body>nn</html>n

三、添加構建配置

在項目根目錄創建 .dawn 目錄，並在 `.dawn` 目錄中創建 `pipe.yml`，然後輸入如下配置

build:n - name: cleann - name: webpackn

好了，現在構建一下我們的代碼吧，執行如下命令

dn buildn

命令執行完畢，會看到項目根目錄多了一個 build 這便是構建結果，簡單到想哭吧。

如上配置，在 build 的 pipeline 中添加了 clean 和 webpack 兩個中間件，在每次執行 dn build 時，pipeline 中的 clean會清理 build 目錄，然後 webpack 會接著進行構建，並把構構建結果放入 build 目錄。

等一下，想要監聽文件的「實時構建」？想要一個用於開發的「Dev Server」？想要瀏覽器「自動同步」？

看下邊，配置一下 dev 的 pipeline，在剛剛的 pipe.yml 中加入 dev 配置

build:n - name: cleann - name: webpacknndev:n - name: cleann - name: webpackn watch: truen - name: servern - name: browser-syncn

現在我們執行一下如下命令

dn devn

在 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）

（全文完）

?? 使用 Dawn 快速搭建 React 項目！

一、環境準備（可略過）

二、創建項目 &amp; 編寫代碼

三、添加構建配置

二、創建項目 & 編寫代碼