使用 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，默认状况下会自动选择一个「可用端口」，不出意外「浏览器」已经「自动打开」了。

编辑一代码试试，browser-sync 中间件会通知浏览器实时自动刷新页面，在适配不一样设备开发时 browser-sync 还会在多个的设备的浏览器中同步。

好了，一个基本的基于 dawn 的 react 工程配置好了。文中提到的 webpack、clean、server、browser-sync，能够关注一下相关文档。

附上一些连接:

相关文档（alibaba.github.io/dawn/docs/）
Dawn 主页（alibaba.github.io/dawn/）
Git Reop（github.com/alibaba/daw…）

（全文完）