🌅 使用 Dawn 快速搭建 React 项目!
2017-09-28 19:21
447 查看
开发一个 React 项目,通常避免不了要去配置
在配置
本文是一篇 Dawn 使用入门文章,介绍如何从「零」开始「手动配置」一个基于 dawn 的
安装 react & react-dom
用你的编辑器,打开项目根目录,比如
在项目根目录创建
在
好了,现在构建一下我们的代码吧,执行如下命令
命令执行完毕,会看到项目根目录多了一个
如上配置,在
等一下,想要监听文件的「实时构建」?想要一个用于开发的 「Dev Server」?想要浏览器「自动同步」?
看下边,配置一下
现在我们执行一下如下命令
在
编辑一代码试试,
好了,一个基本的基于 dawn 的 react 工程配置好了。文中提到的
附上一些链接:
相关文档(https://alibaba.github.io/dawn/docs/)
Dawn 主页(https://alibaba.github.io/dawn/)
Git Reop(https://github.com/alibaba/dawn)
(全文完)
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)
(全文完)
相关文章推荐
- 使用yeoman快速搭建react-webpack开发环境
- 无Maven不项目---使用Eclipse快速搭建Maven项目
- 使用Vue-cli快速搭建项目
- 使用typescript构建react项目环境搭建
- react---学习笔记:使用create-react-app快速构建开发环境并创建项目
- 使用Express快速搭建前端项目框架
- 使用maven archetype 快速开始新项目搭建
- 使用Express 快速搭建Nodejs项目
- vue-cli的使用(快速搭建项目)
- 使用creat-react-app快速新建一个react项目
- [开源项目-MyBean轻量级配置框架] 使用MyBean快速搭建分模块的应用程序(主页面的TAB)(DLL-MDI)
- webstorm 快速搭建react项目
- 使用 vue-cli + element-ui 快速搭建项目
- 使用webpack搭建一个react项目
- Maven快速使用和项目搭建教程
- 使用Springboot快速搭建项目
- 07如何使用express框架快速搭建项目_express框架的初步了解
- React + webpack 快速搭建项目
- 从搭建一个React项目,同时使用git把项目放到GitHub上