使用 Dawn 构建 React 项目

开发一个 React 项目,通常避免不了要去配置 Webpackbabel 之类,以支持 commonjses 模块及各种 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」?想要浏览器「自动同步」?

看下边,配置一下 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,可以关注一下相关文档。


附上一些链接:

  • 相关文档(https://alibaba.github.io/dawn/docs/)
  • Dawn 主页(https://alibaba.github.io/dawn/)
  • Git Reop(https://github.com/alibaba/dawn)

(全文完)

赞 (0) 评论 分享 ()