Dart Web開發環境搭建及新建運行項目

發表時(shí)間：2019-3-14

發布人(rén)：融晨科技

浏覽次數：87

Dart Web開發環境搭建及新建運行項目

- 開發環境的(de)搭建
- - 1. 下載Dart SDK
  - 2. 下載開發工具
  - 3. 創建Dart Web項目

Dart除了(le／liǎo)可以(yǐ)使用Flutter進行移動應用開發外，還可以(yǐ)進行Web開發，Dart主要(yào / yāo)是(shì)替換了(le／liǎo)JavaScript，用Dart來(lái)做JavaScript這(zhè)部分工作，也(yě)可以(yǐ)說(shuō)Dart替代了(le／liǎo)JavaScript和(hé / huò)JQuery框架。我們用Dart來(lái)寫Web後，編譯器會自動将Dart文件編譯爲(wéi / wèi)JavaScript文件進行運行，隻不(bù)過我們寫的(de)語法規範是(shì)Dart語法。Dart文件轉JavaScript文件可以(yǐ)使用dart2js來(lái)轉換。接下來(lái)，我們就(jiù)開始Dart Web開發的(de)準備工作吧。本文将主要(yào / yāo)介紹：

Dart Web開發環境配置
Dart Web開發工具安裝
Dart Web開發的(de)兩種創建Web項目的(de)方式
運行Dart Web項目

開發環境的(de)搭建

Dart Web官方配置英文文檔地(dì / de)址：https://webdev.dartlang.org/guides/get-started
我們也(yě)可以(yǐ)使用DartPad體驗和(hé / huò)運行Dart程序：https://dartpad.dartlang.org/
Fast to Study Flutter And Dart. QQ群：979966470
DartPad界面

1. 下載Dart SDK

本文是(shì)在(zài)Windows環境下進行安裝配置的(de)。
Windows下需要(yào / yāo)先安裝chocolatey：https://chocolatey.org/
使用CMD命令安裝：

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

新建一個(gè)chocolatey.bat文件，将上(shàng)面的(de)這(zhè)段命令複制進去保存。雙擊運行這(zhè)個(gè)bat文件就(jiù)會自動執行安裝chocolatey包管理器操作了(le／liǎo)。
安裝好之(zhī)後，Windows命令窗口執行如下命令：

C:\> choco install dart-sdk

Dart-SDK安裝
Linux需要(yào / yāo)執行以(yǐ)下命令：

> sudo apt-get update
> sudo apt-get install apt-transport-https
> sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
> sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'

> sudo apt-get update
> sudo apt-get install dart

Mac下需要(yào / yāo)執行以(yǐ)下命令：

 > brew tap dart-lang/dart
 > brew install dart

當然除了(le／liǎo)用命令安裝Dart SDK外，我們也(yě)可以(yǐ)安裝Windows版本安裝包文件，下載地(dì / de)址：http://www.gekorm.com/dart-windows/
Dart Web SDK安裝包
在(zài)Dart Web SDK裏包含以(yǐ)下工具：
Dart Web SDK裏包含的(de)工具
其實主要(yào / yāo)的(de)命令工具就(jiù)是(shì)：webdev，用來(lái)構建和(hé / huò)部署Dart Web程序；dart2js，将dart文件轉爲(wéi / wèi)js文件的(de)編譯工具；dartdevc，一個(gè)模塊化的(de)dart轉js文件的(de)編譯工具。
Dart Web SDK裏包含的(de)工具
chocolatey執行命令安裝完dart-sdk後，将Dart SDK的(de)bin目錄加入環境變量：
配置Dart環境變量
測試我們的(de)Dart SDK環境變量是(shì)否配置好，輸入如下命令：

dart --version

如能夠正确輸出(chū)版本号，則dart環境變量配置成功。
測試Dart環境變量是(shì)否配置成功

2. 下載開發工具

開發工具官方推薦是(shì)WebStorm，當然也(yě)可以(yǐ)使用Visual Studio Code，也(yě)可以(yǐ)使用命令工具創建、運行項目。如果想支持命令行運行項目，這(zhè)樣快速方便些。可以(yǐ)安裝webdev和(hé / huò)stagehand（這(zhè)裏需要(yào / yāo)安裝執行下面這(zhè)兩個(gè)命令）：

> pub global activate webdev
> pub global activate stagehand

安裝命令窗口：
安裝webdev和(hé / huò)stagehand
注意：如果你想運行使用Dart2以(yǐ)下的(de)版本，WebStorm版本至少要(yào / yāo)2018.1.3及以(yǐ)上(shàng)。當然，現在(zài)基本都用Dart2及新版本開發了(le／liǎo)。

接下來(lái)下載安裝WebStorm：

WebStorm官方下載地(dì / de)址：https://www.jetbrains.com/webstorm/
WebStorm安裝界面

3. 創建Dart Web項目

使用命令行創建：

> mkdir quickstart
> cd quickstart
> stagehand web-simple
> pub get

使用WebStorm創建：

新建項目：
WebStorm新建項目
選擇Dart項目，點擊CREATE：

項目結構目錄如下圖：

運行項目：

運行後，可以(yǐ)看到(dào)控制台顯示的(de)日志，如果看到(dào)類似的(de)Dart Server啓動成功就(jiù)可以(yǐ)訪問我們的(de)頁面了(le／liǎo)：

頁面效果截圖：
運行效果
可以(yǐ)看出(chū)，這(zhè)裏我們的(de)dart文件就(jiù)是(shì)充當操作html的(de)Dom樹的(de)功能，也(yě)就(jiù)是(shì)替代了(le／liǎo)JS的(de)原始用法，不(bù)過最終運行時(shí)也(yě)是(shì)将dart文件編譯爲(wéi / wèi)js文件運行，隻不(bù)過dart語法比js的(de)使用更加方便與強大(dà)。

import 'dart:html';

void main() {
  querySelector('#output').text = 'Your Dart app is running.';
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
    <title>untitled</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

  <div id="output"></div>

</body>
</html>

再重複下，我們也(yě)可以(yǐ)用Visual Studio Code進行開發，也(yě)可以(yǐ)使用命令創建和(hé / huò)運行項目：

使用命令行創建：

> mkdir quickstart
> cd quickstart
> stagehand web-simple
> pub get

命令行運行項目：

webdev serve

如果想将dart文件編譯轉爲(wéi / wèi)js文件，使用dart sdk自帶的(de)dart2js這(zhè)個(gè)工具。基本用法：

dart2js -O2 -o test.js test.dart

test.js爲(wéi / wèi)輸出(chū)的(de)js文件的(de)路徑+文件名；test.dart爲(wéi / wèi)輸入的(de)要(yào / yāo)轉換的(de)dart文件的(de)路徑+文件名。
更多參數和(hé / huò)複雜用法命令，請看官方：https://webdev.dartlang.org/tools/dart2js

關于(yú)Dart Web開發環境搭建及新建運行項目就(jiù)講解這(zhè)麽多。