使用 Dawn 构建 React 项目

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

开发一个 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 目录中输入如下配置

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

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

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

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


附上一些链接:

目录
相关文章
|
16天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
1天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
12 5
|
4天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
17天前
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用
|
17天前
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
2月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
78 1
react项目配合diff实现文件对比差异功能
|
22天前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
22天前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
22天前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
27天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
70 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)