国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

? 使用 Dawn 快速搭建 React 項目！

Ethan815 / 943人閱讀

摘要：開發一個項目，通常避免不了要去配置和之類，以支持或模塊及各種新語法，及進行語法的轉義。當然也可以用腳手架快速創建一個項目，但與此同時常常又顯的不太自由。本文是一篇使用入門文章，介紹如何從零開始手動配置一個基于的工程。

開發一個 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 

    Hello Dawn!
  
;
}

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

在 src/assets 目錄，并在 src/assets 目錄中創建 index.html，并輸入如下代碼





  
  
  
  Hello Dawn!
三、添加構建配置

在項目根目錄創建 .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）

（全文完）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88770.html

相關文章

  • 3秒鐘快速搭建一個react多頁應用

    摘要：本文主要闡述了如何使用快速搭建一個多頁面應用。而我司當前的情況比較適合于使用多頁面應用，既提高了開發效率，保證了用戶體驗，又極大的兼容了原有的體系。當然也可以不復制不修改，此時就是一個單頁面應用。 what 本文主要闡述了如何使用dawn快速搭建一個多頁面應用。 why 單頁有許多優缺點。而我司當前的情況比較適合于使用多頁面應用，既提高了開發效率，保證了用戶體驗，又極大的兼容了原有的P...

    h9911 評論0 收藏0

  • 利用Dawn工程化工具實踐MobX數據流管理方案

    摘要：新的項目目錄設計如下放置靜態文件業務組件入口文件數據模型定義數據定義工具函數其中數據流實踐的核心概念就是數據模型和數據儲存。最后再吃我一發安利是阿里云業務運營事業部前端團隊開源的前端構建和工程化工具。 本文首發于阿里云前端dawn團隊專欄。 項目在最初應用 MobX 時，對較為復雜的多人協作項目的數據流管理方案沒有一個優雅的解決方案，通過對MobX官方文檔中針對大型可維護項目最佳實踐的...

    0x584a 評論0 收藏0

  • ? 阿里云前端工程化工具 Dawn 正式開源!

    摘要：取黎明破曉之意，原為阿里云業務運營團隊內部的前端構建和工程化工具，現已完全開源。它通過和將開發過程抽象為相對固定的階段和有限的操作，簡化并統一了開發人員的日常構建與開發相關的工作。 showImg(https://segmentfault.com/img/remote/1460000011006491); Dawn Dawn 取「黎明、破曉」之意，原為「阿里云·業務運營團隊」內部的前端...

    陸斌 評論0 收藏0

  • 阿里云前端周刊 - 第 20 期

    摘要：網頁可訪問性似乎是一項艱巨的任務，但它確實比聽起來要容易很多，這十條網頁可訪問性準則旨在確保所有網站都是通用的。 推薦 1. 阿里電商架構演變之路 https://yq.aliyun.com/article... 首屆阿里巴巴中間件技術峰會上，阿里巴巴中間件技術部專家唐三帶來阿里電商架構演變之路的演講，本文從阿里業務和技術架構開始引入，分別分享了阿里電商從1.0到4.0架構的演變之路，...

    Baaaan 評論0 收藏0

發表評論

0條評論

Ethan815

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<