开发一个 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,可以关注一下相关文档。


附上一些链接:

(全文完)

🌅 使用 Dawn 快速搭建 React 项目!的更多相关文章

  1. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  2. 使用脚手架快速搭建React项目

    create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境步骤: 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 np ...

  3. 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  4. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  5. Spring Boot入门-快速搭建web项目

    Spring Boot 概述: Spring Boot makes it easy to create stand-alone, production-grade Spring based Appli ...

  6. 快速搭建Vue项目

    快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...

  7. Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具

    Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具 A simple CLI for scaffolding React.js ...

  8. 在线官网Spring Initializr 或 IntelliJ IDEA 快速搭建springboot项目

    Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置’,实现零配置. 那么,如何快速新建一个一个spring ...

  9. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

随机推荐

  1. 【hdoj_2100】Lovekey(大数+字符处理)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2100 根据题目意思,现将字符串转化为10进制,再采用10进制加法相加,再转化为26进制. 另一种直接的思路 ...

  2. 使用注解配置SQL映射器

    在上一章,我们看到了我们是怎样在映射器Mapper XML配置文件中配置映射语句的.MyBatis也支持使用注解来配置映射语句.当我们使用基于注解的映射器接口时,我们不再需要在XML配置文件中配置了. ...

  3. 使用gradle建立java application

    建立项目目录mkdir java-democd java-demo 初始化项目目录gradle init --type java-application 编译./gradlew build 运行./g ...

  4. Gitlab在centos7上手工安装

    本节内容: 安装包 安装Gitlab 配置Gitlab URL 配置防火墙 执行Gitlab的一些基本设置 环境及条件: 系统:CentOS Linux release 7.5.1804 (Core) ...

  5. Node.js 部署到 CentOs

    配置服务器环境 3.把yum更新到最新版本: yum -y update 4.我们将使用最新源代码构建Node.js,要进行软件的安装,需要一组用来编译源代码的开发工具: yum -y groupin ...

  6. 【BZOJ 2654】 MST

    2654: tree Description 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解. Input 第一行V,E,need分别表示 ...

  7. 【2-SAT】【DFS】【分类讨论】Gym - 101617K - Unsatisfying

    题意:给你一张2-SAT,问你加至少几句a V b(不能用非运算)这样的语句,使得其无法全为真. 如果最开始没有左右两项都含非运算的析取表达式,则无解,因为显然你可以对每一项的不含非的那项规定为真,使 ...

  8. WordPress插件会员简化1.58 -任意文件下载漏洞(附poc)

    今天我们将讨论在WordPress插件WordPress插件与重点会员简化v1.58作为这个剧本的创作时间不打补丁的扶贫开发实践.脆弱脚本如下: CVE-ID:cve-2017-1002008 当然, ...

  9. 使用百度ai接口加图灵机器人完成简单web版语音对话

    app文件 from flask import Flask, request, render_template, jsonify, send_file from uuid import uuid4 i ...

  10. MODI出现ORC RUNNING ERROR的解决方法

    stackflow都没个靠谱的说法,最后还是csdn上看到的.转一个备用.http://bbs.csdn.net/topics/390135443 由于直接执行Mircosoft Office Doc ...