成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

? 使用 Dawn 快速搭建 React 項(xiàng)目！

Ethan815 / 955人閱讀

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

開發(fā)一個(gè) React 項(xiàng)目，通常避免不了要去配置 Webpack 和 babel 之類，以支持 commonjs 或 es 模塊及各種 es 新語法，及進(jìn)行 jsx 語法的轉(zhuǎn)義。當(dāng)然也可以用 create-react-appp 腳手架快速創(chuàng)建一個(gè) react 項(xiàng)目，但與此同時(shí) create-react-app 常常又顯的不太自由。

在配置 webpack 時(shí)，看著上百行的 webpack.config.js 是不是很鬧心？為了重用是不是在多個(gè)項(xiàng)目間各種 ctrl-c -> ctrl-v，整個(gè)配置起來還是稍顯麻煩，對(duì)于新手用戶常常更是一頭霧水，事實(shí)上，最大化重用和簡(jiǎn)化構(gòu)建配置也是 dawn 的目標(biāo)之一。

本文是一篇 Dawn 使用入門文章，介紹如何從「零」開始「手動(dòng)配置」一個(gè)基于 dawn 的 react 工程。

一、環(huán)境準(zhǔn)備（可略過） 
# 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
二、創(chuàng)建項(xiàng)目 & 編寫代碼

創(chuàng)建一個(gè)普通的 Node 項(xiàng)目

# 1. 創(chuàng)建項(xiàng)目目錄
mkdir react-demo
cd react-demo

# 2. 初始化 package
npm init

安裝 react & react-dom

npm i react react-dom --save-dev

用你的編輯器，打開項(xiàng)目根目錄，比如 vscode

vscode .

在項(xiàng)目根目錄創(chuàng)建 src 目錄，并在 src 目錄中創(chuàng)建 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 目錄中創(chuàng)建 index.html，并輸入如下代碼





  
  
  
  Hello Dawn!
三、添加構(gòu)建配置

在項(xiàng)目根目錄創(chuàng)建 .dawn 目錄，并在 .dawn 目錄中創(chuàng)建 pipe.yml，然后輸入如下配置

build:
  - name: clean
  - name: webpack

好了，現(xiàn)在構(gòu)建一下我們的代碼吧，執(zhí)行如下命令

dn build

命令執(zhí)行完畢，會(huì)看到項(xiàng)目根目錄多了一個(gè) build 這便是構(gòu)建結(jié)果，簡(jiǎn)單到想哭吧。

如上配置，在 build 的 pipeline 中添加了 clean 和 webpack 兩個(gè)中間件，在每次執(zhí)行 dn build 時(shí)，pipeline 中的 clean 會(huì)清理 build 目錄，然后 webpack 會(huì)接著進(jìn)行構(gòu)建，并把構(gòu)構(gòu)建結(jié)果放入 build 目錄。

等一下，想要監(jiān)聽文件的「實(shí)時(shí)構(gòu)建」？想要一個(gè)用于開發(fā)的 「Dev Server」？想要瀏覽器「自動(dòng)同步」？

看下邊，配置一下 dev 的 pipeline，在剛剛的 pipe.yml 中加入 dev 配置

build:
  - name: clean
  - name: webpack

dev:
  - name: clean
  - name: webpack
    watch: true
  - name: server
  - name: browser-sync

現(xiàn)在我們執(zhí)行一下如下命令

dn  dev

在 dev 的 pipeline 中，我們把 webpack 的 watch 選項(xiàng)打開了，打開后便能監(jiān)聽文件的變化并進(jìn)行「實(shí)時(shí)構(gòu)建」了，接下來的任務(wù)交給 server 中間件，它會(huì)在構(gòu)建啟動(dòng)后啟動(dòng)一個(gè)靜態(tài)的 Web Server，默認(rèn)情況下會(huì)自動(dòng)選擇一個(gè)「可用端口」，不出意外「瀏覽器」已經(jīng)「自動(dòng)打開」了。

編輯一代碼試試，browser-sync 中間件會(huì)通知瀏覽器實(shí)時(shí)自動(dòng)刷新頁面，在適配不同設(shè)備開發(fā)時(shí) browser-sync 還會(huì)在多個(gè)的設(shè)備的瀏覽器中同步。

好了，一個(gè)基本的基于 dawn 的 react 工程配置好了。文中提到的 webpack、clean、server、browser-sync，可以關(guān)注一下相關(guān)文檔。

附上一些鏈接:

相關(guān)文檔（https://alibaba.github.io/dawn/docs/）

Dawn 主頁（https://alibaba.github.io/dawn/）

Git Reop（https://github.com/alibaba/dawn）

（全文完）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88770.html

相關(guān)文章

  • 3秒鐘快速搭建一個(gè)react多頁應(yīng)用

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

    h9911 評(píng)論0 收藏0

  • 利用Dawn工程化工具實(shí)踐MobX數(shù)據(jù)流管理方案

    摘要：新的項(xiàng)目目錄設(shè)計(jì)如下放置靜態(tài)文件業(yè)務(wù)組件入口文件數(shù)據(jù)模型定義數(shù)據(jù)定義工具函數(shù)其中數(shù)據(jù)流實(shí)踐的核心概念就是數(shù)據(jù)模型和數(shù)據(jù)儲(chǔ)存。最后再吃我一發(fā)安利是阿里云業(yè)務(wù)運(yùn)營(yíng)事業(yè)部前端團(tuán)隊(duì)開源的前端構(gòu)建和工程化工具。 本文首發(fā)于阿里云前端dawn團(tuán)隊(duì)專欄。 項(xiàng)目在最初應(yīng)用 MobX 時(shí)，對(duì)較為復(fù)雜的多人協(xié)作項(xiàng)目的數(shù)據(jù)流管理方案沒有一個(gè)優(yōu)雅的解決方案，通過對(duì)MobX官方文檔中針對(duì)大型可維護(hù)項(xiàng)目最佳實(shí)踐的...

    0x584a 評(píng)論0 收藏0

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

    摘要：取黎明破曉之意，原為阿里云業(yè)務(wù)運(yùn)營(yíng)團(tuán)隊(duì)內(nèi)部的前端構(gòu)建和工程化工具，現(xiàn)已完全開源。它通過和將開發(fā)過程抽象為相對(duì)固定的階段和有限的操作，簡(jiǎn)化并統(tǒng)一了開發(fā)人員的日常構(gòu)建與開發(fā)相關(guān)的工作。 showImg(https://segmentfault.com/img/remote/1460000011006491); Dawn Dawn 取「黎明、破曉」之意，原為「阿里云·業(yè)務(wù)運(yùn)營(yíng)團(tuán)隊(duì)」內(nèi)部的前端...

    陸斌 評(píng)論0 收藏0

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

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

    Baaaan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<