使用 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: 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)
(全文完)
使用 Dawn 构建 React 项目的更多相关文章
- 简述--构建React项目的几种方式
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- [react001] 使用webpack自动构建react 项目
1.react 简介 React 是一个Facebook出品的前端UI开发框架.react官方的tutorials 为了让人容易上手,并没有给在平常工作使用react的详细配置,随意学习的深入,你为了 ...
- 技本功丨利用 Atomic 构建 React 项目工作流,so easy!
近日刷微博,#2018年结婚率创新低#荣登热门话题NO.1,沪浙最不积极. 生活压力越大,缺爱的人也越来越多...据本萌的不完全观察,程序猿虽然是压力加成的职业,在袋鼠云还是有不少早早脱了单.至于,脱 ...
- 使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目
1.安装.构建 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app my-app cd my-app ...
- webpack构建react项目(一)
前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或 ...
- react-create-app 构建react项目的流程以及需要注意的地方
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...
- 和我一起使用webpack构建react项目
第一步:初始化项目并创建package.json文件 第二步:创建webpack.config.js文件,并写入配置. 第三步:安装webpack以及创建es6语法环境,要将html作为模板文件解析的 ...
- 使用dva脚手架(dva-cli)快速构建React项目
安装 dva-cli 你应该会更希望关注逻辑本身,而不是手动敲入一行行代码来构建初始的项目结构,以及配置开发环境. 那么,首先需要安装的是 dva-cli .dva-cli 是 dva 的命令行工具, ...
- 构建react项目失败解决办法
1.初始化项目,报下方错误 2.解决方法,更新淘宝镜像 npm config set registry https://registry.npm.taobao.org 3.在初始化项目 create- ...
随机推荐
- python+selenium自动化软件测试(第13章):selenium面试题
前言最近看到群里有小伙伴贴出一组面试题,最近又是跳槽黄金季节,小编忍不住抽出一点时间总结了下 一.selenium中如何判断元素是否存在?expected_conditions模块提供了16种判断方法 ...
- The C++ Programming Language 学习笔记 第四章 类型和声明
1.关于main 函数中的 return 0 C99标准中,main 函数的返回值类型必须是 int ,这样返回值才能传递给程序的激活者(如操作系统).如果 main 函数的最后没有写 return ...
- myeclipse eclipse创建maven web项目时 index.jsp报错
第一种办法 解决办法: ---------------------------------------------------------------------------------------- ...
- .net基础第一天
.net基础 <head>+控制类标签 +<head> 1 <body>+网页要显示的内容+</body> <body +空格+bgcolor= ...
- Angular+ionic2 web端 启动程序出现短暂 白屏或黑屏 的处理小妙招
在ionic2项目启动是会出现短暂的白屏或者黑屏,虽然很短,但是用户体验不太好.上网查了相关的资料,都是针对打包APP的解决办法,针对浏览器端使用的项目没有效果,所以自己写了样式,巧妙的避开这个问题, ...
- datable 翻页事件处理
JQuery datatable插件,点下一页在点击事件无效问题 (2013-10-16 16:01:54) 转载▼ 分类: C# 在MVC的项目中,我利用jquery datatable 来实现 ...
- group by 详解
1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...
- [转载]dreamweaver代码提示失效
原文地址:dreamweaver代码提示失效作者:云中雁 2007-03-23 12:19:22| 分类: 编程手记 | 标签:web2.0 javascript |字号大中小 订阅 吴庆民 ...
- 九度OJ 1014 排名
#include <iostream> #include <string.h> #include <sstream> #include <math.h> ...
- 201521123112《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 在做PTA5.3的时候一段看起来比较复杂的代码: List<En ...