2

开发一个 React 项目,通常避免不了要去配置 Webpackbabel 之类,以支持 commonjses 模块及各种 es 新语法,及进行 jsx 语法的转义。当然也可以用 create-react-appp 脚手架快速创建一个 react 项目,但与此同时 create-react-app 常常又显的不太自由。

在配置 webpack 时,看着上百行的 webpack.config.js 是不是很闹心?为了重用是不是在多个项目间各种 ctrl-c -> ctrl-v,整个配置起来还是稍显麻烦,对于新手用户常常更是一头雾水,事实上,最大化重用和简化构建配置也是 dawn 的目标之一。

本文是一篇 Dawn 使用入门文章,介绍如何从「零」开始「手动配置」一个基于 dawnreact 工程。

一、环境准备(可略过)

# 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 这便是构建结果,简单到想哭吧。

如上配置,在 buildpipeline 中添加了 cleanwebpack 两个中间件,在每次执行 dn build 时,pipeline 中的 clean 会清理 build 目录,然后 webpack 会接着进行构建,并把构构建结果放入 build 目录。

等一下,想要监听文件的「实时构建」?想要一个用于开发的 「Dev Server」?想要浏览器「自动同步」?

看下边,配置一下 devpipeline,在刚刚的 pipe.yml 中加入 dev 配置

build:
  - name: clean
  - name: webpack

dev:
  - name: clean
  - name: webpack
    watch: true
  - name: server
  - name: browser-sync

现在我们执行一下如下命令

dn  dev

devpipeline 中,我们把 webpackwatch 选项打开了,打开后便能监听文件的变化并进行「实时构建」了,接下来的任务交给 server 中间件,它会在构建启动后启动一个静态的 Web Server,默认情况下会自动选择一个「可用端口」,不出意外「浏览器」已经「自动打开」了。

图片描述

编辑一代码试试,browser-sync 中间件会通知浏览器实时自动刷新页面,在适配不同设备开发时 browser-sync 还会在多个的设备的浏览器中同步。

好了,一个基本的基于 dawn 的 react 工程配置好了。文中提到的 webpackcleanserverbrowser-sync,可以关注一下相关文档。


附上一些链接:

(全文完)


Houfeng
902 声望217 粉丝

写代码的