使用 Dawn 構建 React 項目

時間 2019-11-29

標籤使用 dawn 構建 react 項目欄目 React 简体版

原文原文鏈接

開發一個 React 項目，一般避免不了要去配置 Webpack 和 babel 之類，以支持 commonjs 或 es 模塊及各類 es 新語法，及進行 jsx 語法的轉義。固然也能夠用 create-react-appp 腳手架快速建立一個 react 項目，但與此同時 create-react-app經常又顯的不太自由。html

在配置 webpack 時，看着上百行的 webpack.config.js 是否是很鬧心？爲了重用是否是在多個項目間各類 ctrl-c -> ctrl-v，整個配置起來仍是稍顯麻煩，對於新手用戶經常更是一頭霧水，事實上，最大化重用和簡化構建配置也是 dawn 的目標之一。react

本文是一篇 Dawn 使用入門文章，介紹如何從「零」開始「手動配置」一個基於 dawn 的 react 工程。webpack

1、環境準備（可略過）

# 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
複製代碼

2、建立項目 & 編寫代碼

建立一個普通的 Node 項目git

# 1. 建立項目目錄
mkdir react-demo
cd react-demo

# 2. 初始化 package
npm init
複製代碼

安裝 react & react-domgithub

npm i react react-dom --save-dev
複製代碼

用你的編輯器，打開項目根目錄，好比 vscodeweb

vscode .
複製代碼

在項目根目錄建立 src 目錄，並在 src 目錄中建立 index.js，並輸入以下代碼npm

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>
複製代碼

3、添加構建配置

在項目根目錄建立 .dawn 目錄，並在 `.dawn` 目錄中建立 `pipe.yml`，而後輸入以下配置bash

build:
  - name: clean
  - name: webpack
複製代碼

好了，如今構建一下咱們的代碼吧，執行以下命令babel

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，默認狀況下會自動選擇一個「可用端口」，不出意外「瀏覽器」已經「自動打開」了。