使用 Dawn 构建 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: webpackdev:- name: clean- name: webpackwatch: 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…)
(全文完)
使用 Dawn 构建 React 项目相关推荐
- 自己构建React项目
如果没有create-react-app,我们应该如何构建项目呢?今天让我们一起通过自己的方式打包react项目吧! 第一步创建文件 mkdir react-boiler-plate cd react ...
- 使用dva脚手架(dva-cli)快速构建React项目
安装 dva-cli 你应该会更希望关注逻辑本身,而不是手动敲入一行行代码来构建初始的项目结构,以及配置开发环境. 那么,首先需要安装的是 dva-cli .dva-cli 是 dva 的命令行工具, ...
- 使用 create-react-app 构建 react应用程序
2019独角兽企业重金招聘Python工程师标准>>> 本文主要是对SPA搭建的实践过程讲解,在对react.redux.react-router有了初步了解后,来运用这些技术构建一 ...
- 如何创建React项目
前言 构建React项目的几种方式: create-react-app 脚手架快速搭建 react 项目(推荐) yeoman 脚手架搭建 react 项目 webpack 一步一步构建 react ...
- 如何创建一个 react 项目
目录 前言 一.create-react-app 脚手架快速搭建 react 项目 1.安装 create-react-app 2.检测 create-react-app 是否安装成功 3.创建 re ...
- React项目搭建及环境配置
React 脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的.用于快速构建开发环境的脚手架工具 create-react ...
- 构建一个react项目_您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
- react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤 我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
- react-dnd-dom_我如何使用react-dnd和react-flip-move构建React游戏
react-dnd-dom by Nicholas Vincent-Hill 尼古拉斯·文森特·希尔(Nicholas Vincent-Hill) 我如何使用react-dnd和react-flip- ...
最新文章
- VC++ 6.0下OpengGL配置以及glut配置
- Server Application Unavailable
- Java对象的序列化与反序列化
- Frequent Pattern 挖掘之二(FP Growth算法)(转)
- 汉字转UNICODE?
- 【算法】—— 最大子序列和问题
- C ++ stringstream –参考和使用指南
- POJ3421:X-factor Chains——题解
- [转]vs2008 + OpenCV-2.1.0-win32-vs2008安装
- 1、ARM嵌入式系统:KL25Z128 初始化整体流程
- 【学习笔记】信息系统项目管理-项目采购管理-合同分类
- 大鱼吃小鱼小游戏完整版
- 离职时,是在公司群里大方告别,主动退群?还是一言不发,默默退出?
- java 四边形_java求教,编写一个四边形的类与子类
- 【已解决】python 使用xlrd,xlwt 修改execl单元格的背景色
- 平板有必要买触控笔吗?好用又便宜的触控笔推荐
- 通过电脑远程链接termux
- quot;title_activity_distquot; is not translated in quot;zh-rCNquot; (Chinese: China)
- java基础 equals与hashCode
- 事件相机模拟器rpg-esim环境搭建