开发一个 React 项目,通常避免不了要去配置
和
- webpack
之类,以支持
- babel
或
- commonjs
模块及各种
- es
新语法,及进行
- es
语法的转义。当然也可以用
- jsx
脚手架快速创建一个
- create-react-appp
项目,但与此同时
- react
常常又显的不太自由。
- create-react-app
在配置
时,看着上百行的
- webpack
是不是很闹心?为了重用是不是在多个项目间各种
- webpack.config.js
,整个配置起来还是稍显麻烦,对于新手用户常常更是一头雾水,事实上,最大化重用和简化构建配置也是 dawn 的目标之一。
- ctrl-c -> ctrl-v
本文是一篇 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
如上配置,在
的 pipeline 中添加了 clean 和 webpack 两个中间件,在每次执行
- build
时,
- 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
选项打开了,打开后便能监听文件的变化并进行「实时构建」了,接下来的任务交给 server 中间件,它会在构建启动后启动一个静态的
- watch
,默认情况下会自动选择一个「可用端口」,不出意外「浏览器」已经「自动打开」了。
- Web Server
编辑一代码试试,
中间件会通知浏览器实时自动刷新页面,在适配不同设备开发时
- browser-sync
还会在多个的设备的浏览器中同步。
- browser-sync
好了,一个基本的基于 dawn 的 react 工程配置好了。文中提到的
、
- webpack
、
- clean
、
- server
,可以关注一下相关文档。
- browser-sync
附上一些链接:
(全文完)
来源: http://www.cnblogs.com/houfeng/p/7608136.html