🌅 使用 Dawn 快速搭建 React 项目!
开发一个 React 项目,通常避免不了要去配置 Webpack
和 babel
之类,以支持 commonjs
或 es
模块及各种 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」?想要浏览器「自动同步」?
看下边,配置一下 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
的 watch
选项打开了,打开后便能监听文件的变化并进行「实时构建」了,接下来的任务交给 server 中间件,它会在构建启动后启动一个静态的 Web Server
,默认情况下会自动选择一个「可用端口」,不出意外「浏览器」已经「自动打开」了。
编辑一代码试试,browser-sync
中间件会通知浏览器实时自动刷新页面,在适配不同设备开发时 browser-sync
还会在多个的设备的浏览器中同步。
好了,一个基本的基于 dawn 的 react 工程配置好了。文中提到的 webpack
、clean
、server
、browser-sync
,可以关注一下相关文档。
附上一些链接:
- 相关文档(https://alibaba.github.io/dawn/docs/)
- Dawn 主页(https://alibaba.github.io/dawn/)
- Git Reop(https://github.com/alibaba/dawn)
(全文完)
🌅 使用 Dawn 快速搭建 React 项目!的更多相关文章
- [Web 前端] webstorm 快速搭建react项目
cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...
- 使用脚手架快速搭建React项目
create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境步骤: 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 np ...
- 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)
一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- Spring Boot入门-快速搭建web项目
Spring Boot 概述: Spring Boot makes it easy to create stand-alone, production-grade Spring based Appli ...
- 快速搭建Vue项目
快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...
- Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具
Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具 A simple CLI for scaffolding React.js ...
- 在线官网Spring Initializr 或 IntelliJ IDEA 快速搭建springboot项目
Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置’,实现零配置. 那么,如何快速新建一个一个spring ...
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
随机推荐
- 【hdoj_2100】Lovekey(大数+字符处理)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2100 根据题目意思,现将字符串转化为10进制,再采用10进制加法相加,再转化为26进制. 另一种直接的思路 ...
- 使用注解配置SQL映射器
在上一章,我们看到了我们是怎样在映射器Mapper XML配置文件中配置映射语句的.MyBatis也支持使用注解来配置映射语句.当我们使用基于注解的映射器接口时,我们不再需要在XML配置文件中配置了. ...
- 使用gradle建立java application
建立项目目录mkdir java-democd java-demo 初始化项目目录gradle init --type java-application 编译./gradlew build 运行./g ...
- Gitlab在centos7上手工安装
本节内容: 安装包 安装Gitlab 配置Gitlab URL 配置防火墙 执行Gitlab的一些基本设置 环境及条件: 系统:CentOS Linux release 7.5.1804 (Core) ...
- Node.js 部署到 CentOs
配置服务器环境 3.把yum更新到最新版本: yum -y update 4.我们将使用最新源代码构建Node.js,要进行软件的安装,需要一组用来编译源代码的开发工具: yum -y groupin ...
- 【BZOJ 2654】 MST
2654: tree Description 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解. Input 第一行V,E,need分别表示 ...
- 【2-SAT】【DFS】【分类讨论】Gym - 101617K - Unsatisfying
题意:给你一张2-SAT,问你加至少几句a V b(不能用非运算)这样的语句,使得其无法全为真. 如果最开始没有左右两项都含非运算的析取表达式,则无解,因为显然你可以对每一项的不含非的那项规定为真,使 ...
- WordPress插件会员简化1.58 -任意文件下载漏洞(附poc)
今天我们将讨论在WordPress插件WordPress插件与重点会员简化v1.58作为这个剧本的创作时间不打补丁的扶贫开发实践.脆弱脚本如下: CVE-ID:cve-2017-1002008 当然, ...
- 使用百度ai接口加图灵机器人完成简单web版语音对话
app文件 from flask import Flask, request, render_template, jsonify, send_file from uuid import uuid4 i ...
- MODI出现ORC RUNNING ERROR的解决方法
stackflow都没个靠谱的说法,最后还是csdn上看到的.转一个备用.http://bbs.csdn.net/topics/390135443 由于直接执行Mircosoft Office Doc ...