? 使用 Dawn 快速搭建 React 專案！

阿里雲前端發表於2017-11-05
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 id="root"></div>
</body>

</html>複製程式碼

三、新增構建配置

在專案根目錄建立 .dawn 目錄，並在 .dawn 目錄中建立 pipe.yml，然後輸入如下配置

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複製程式碼

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

dn  dev複製程式碼

在 dev 的 pipeline 中，我們把 webpack 的 watch 選項開啟了，開啟後便能監聽檔案的變化並進行「實時構建」了，接下來的任務交給 server 中介軟體，它會在構建啟動後啟動一個靜態的 Web Server，預設情況下會自動選擇一個「可用埠」，不出意外「瀏覽器」已經「自動開啟」了。

Screen Shot 2017-09-28 at 5.27.43 PM.png
Screen Shot 2017-09-28 at 5.27.43 PM.png

編輯一程式碼試試，browser-sync 中介軟體會通知瀏覽器實時自動重新整理頁面，在適配不同裝置開發時 browser-sync 還會在多個的裝置的瀏覽器中同步。

好了，一個基本的基於 dawn 的 react 工程配置好了。文中提到的 webpack、clean、server、browser-sync，可以關注一下相關文件。

附上一些連結:

（全文完）

相關文章