? 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 이 입문 글 을 사용 하여 '0' 부터 '수 동 설정' 을 어떻게 시작 하 는 지 dawn 기반 react 프로젝트 를 소개 한다.
1. 환경 준비 (생략 가능)

# 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

2. 프로젝트 생 성 & 코드 작성
일반 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 

    Hello Dawn!
  
;
}

ReactDOM.render(
  , document.getElementById('root')
);

src/assets 디 렉 터 리 를 만 들 고 src/assets 디 렉 터 리 에 index.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）

(전문 완료)