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

Ethan815 发布于2019-08-21 16:49 / 805人阅读

摘要：开发一个项目，通常避免不了要去配置和之类，以支持或模块及各种新语法，及进行语法的转义。当然也可以用脚手架快速创建一个项目，但与此同时常常又显的不太自由。本文是一篇使用入门文章，介绍如何从零开始手动配置一个基于的工程。

开发一个 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 
    Hello Dawn!
  ;
}

ReactDOM.render(
  , document.getElementById("root")
);

在 src/assets 目录，并在 src/assets 目录中创建 index.html，并输入如下代码





  
  
  
  Hello Dawn!

三、添加构建配置

在项目根目录创建 .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，默认情况下会自动选择一个「可用端口」，不出意外「浏览器」已经「自动打开」了。

编辑一代码试试，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）

（全文完）

云服务器混合云怎么部署react项目 react使用webrtc Dawn 快速使用深度学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88770.html

3秒钟快速搭建一个react多页应用

摘要：本文主要阐述了如何使用快速搭建一个多页面应用。而我司当前的情况比较适合于使用多页面应用，既提高了开发效率，保证了用户体验，又极大的兼容了原有的体系。当然也可以不复制不修改，此时就是一个单页面应用。 what 本文主要阐述了如何使用dawn快速搭建一个多页面应用。 why 单页有许多优缺点。而我司当前的情况比较适合于使用多页面应用，既提高了开发效率，保证了用户体验，又极大的兼容了原有的P...

h9911 2019-08-22 11:23 评论0 收藏0
利用Dawn工程化工具实践MobX数据流管理方案

摘要：新的项目目录设计如下放置静态文件业务组件入口文件数据模型定义数据定义工具函数其中数据流实践的核心概念就是数据模型和数据储存。最后再吃我一发安利是阿里云业务运营事业部前端团队开源的前端构建和工程化工具。本文首发于阿里云前端dawn团队专栏。项目在最初应用 MobX 时，对较为复杂的多人协作项目的数据流管理方案没有一个优雅的解决方案，通过对MobX官方文档中针对大型可维护项目最佳实践的...

0x584a 2019-08-21 17:19 评论0 收藏0
? 阿里云前端工程化工具 Dawn 正式开源!

摘要：取黎明破晓之意，原为阿里云业务运营团队内部的前端构建和工程化工具，现已完全开源。它通过和将开发过程抽象为相对固定的阶段和有限的操作，简化并统一了开发人员的日常构建与开发相关的工作。 showImg(https://segmentfault.com/img/remote/1460000011006491); Dawn Dawn 取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端...

陆斌 2019-08-20 19:09 评论0 收藏0
阿里云前端周刊 - 第 20 期

摘要：网页可访问性似乎是一项艰巨的任务，但它确实比听起来要容易很多，这十条网页可访问性准则旨在确保所有网站都是通用的。推荐 1. 阿里电商架构演变之路 https://yq.aliyun.com/article... 首届阿里巴巴中间件技术峰会上，阿里巴巴中间件技术部专家唐三带来阿里电商架构演变之路的演讲，本文从阿里业务和技术架构开始引入，分别分享了阿里电商从1.0到4.0架构的演变之路，...

Baaaan 2019-08-21 11:54 评论0 收藏0
阿里云前端周刊 - 第 20 期

摘要：网页可访问性似乎是一项艰巨的任务，但它确实比听起来要容易很多，这十条网页可访问性准则旨在确保所有网站都是通用的。推荐 1. 阿里电商架构演变之路 https://yq.aliyun.com/article... 首届阿里巴巴中间件技术峰会上，阿里巴巴中间件技术部专家唐三带来阿里电商架构演变之路的演讲，本文从阿里业务和技术架构开始引入，分别分享了阿里电商从1.0到4.0架构的演变之路，...

崔晓明 2019-08-05 11:51 评论0 收藏0