Developing a React project usually involves configuring things like Webpack and Babel to support commonJS or ES modules and various new ES syntax, as well as escaping JSX syntax. It is possible to quickly create a React project using the create-React-Appp scaffolding, but create-react-app is often a bit less free.

Is it frustrating to look at hundreds of lines of webpack.config.js when configuring Webpack? In order to reuse multiple ctrL-C -> CtrL-V projects, the entire configuration is still a bit cumbersome and often confusing to novice users. In fact, maximizing reuse and simplifying build configurations is one of Dawn’s goals.

This article is an introduction to the Use of Dawn. It describes how to “manually configure” a Dawn-based React project from “zero”.

I. Environmental preparation (can be skipped)

# 1. Install NVMThe curl - o - https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash# 2. Install NodeNVM install 8.6.0 NVMaliasThe default 8.6.0# 3. Install Dawn
npm i dawn -gCopy the code

Create a project & Write code

Create a normal Node project

# 1. Create the project directory
mkdir react-demo
cd react-demo

# 2. Initialize package
npm initCopy the code

Install react & react-dom

npm i react react-dom --save-devCopy the code

Using your editor, open the project root directory, such as vscode

vscode .Copy the code

Create a SRC directory in the project root directory and create index.js in the SRC directory and enter the following code

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <div>
    Hello Dawn!
  </div>;
}

ReactDOM.render(
  <App />, document.getElementById('root')
);Copy the code

Create index.html in the SRC /assets directory and enter the following code


      
<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>Copy the code

Add build configuration

Create the.dawn directory in the project root directory and create pipe.yml in the.dawn directory, then enter the following configuration

build:
  - name: clean
  - name: webpackCopy the code

Ok, now to build our code, execute the following command

dn buildCopy the code

After executing this command, you will see a new build in the project root directory.

In the above configuration, clean and Webpack are added to build pipeline. When dn build is executed each time, clean in pipeline will clean build directory, and then Webpack will continue to build. And put the result of the construction into the build directory.

Wait, want to listen for a “live build” of a file? Want a “Dev Server” for development? Want browser “auto-sync”?

Configure dev pipeline. Add dev configuration to pipe.yml

build:
  - name: clean
  - name: webpack

dev:
  - name: clean
  - name: webpack
    watch: true
  - name: server
  - name: browser-syncCopy the code

Now let’s execute the following command

dn  devCopy the code

In the dev pipeline, we turn on the WebPack watch option, which can listen for file changes and “build in real time”. The next task is handed to the Server middleware, which will start a static Web server after the build starts. By default, an “available port” is automatically selected and, unsurprisingly, the “browser” is already “automatically open”.

PNG Screen Shot 2017-09-28 at 5.27.43 pm.png

Try editing the code. Browser-sync middleware notifies the browser to automatically refresh the page in real time, and browser-Sync synchronizes across browsers on multiple devices as it ADAPTS to different devices.

Ok, a basic Dawn based React project is configured. Webpack, Clean, Server and Browser-sync are mentioned in this article.

Here are some links:

  • Relevant documents (alibaba. Making. IO/dawn/docs /)
  • Dawn home Page (Baba.github. IO/Dawn /)
  • Git Reop (github.com/alibaba/daw…)

(Full text)