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

開發環境的搭建

Dart除了可以使用Flutter進行移動應用開發外，還可以進行Web開發，Dart主要是替換了JavaScript，用Dart來做JavaScript這部分工作，也可以說Dart替代了JavaScript和JQuery框架。我們用Dart來寫Web後，編譯器會自動將Dart文件編譯爲JavaScript文件進行運行，只不過我們寫的語法規範是Dart語法。Dart文件轉JavaScript文件可以使用dart2js來轉換。接下來，我們就開始Dart Web開發的準備工作吧。本文將主要介紹：

Dart Web開發環境配置

Dart Web開發工具安裝

Dart Web開發的兩種創建Web項目的方式

運行Dart Web項目

開發環境的搭建

Dart Web官方配置英文文檔地址：https://webdev.dartlang.org/guides/get-started
我們也可以使用DartPad體驗和運行Dart程序：https://dartpad.dartlang.org/

1. 下載Dart SDK

本文是在Windows環境下進行安裝配置的。
Windows下需要先安裝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"

新建一個chocolatey.bat文件，將上面的這段命令複製進去保存。雙擊運行這個bat文件就會自動執行安裝chocolatey包管理器操作了。
安裝好之後，Windows命令窗口執行如下命令：

C:\> choco install dart-sdk

Linux需要執行以下命令：

> 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下需要執行以下命令：

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

當然除了用命令安裝Dart SDK外，我們也可以安裝Windows版本安裝包文件，下載地址：http://www.gekorm.com/dart-windows/

在Dart Web SDK裏包含以下工具：

其實主要的命令工具就是：webdev，用來構建和部署Dart Web程序；dart2js，將dart文件轉爲js文件的編譯工具；dartdevc，一個模塊化的dart轉js文件的編譯工具。

chocolatey執行命令安裝完dart-sdk後，將Dart SDK的bin目錄加入環境變量：

測試我們的Dart SDK環境變量是否配置好，輸入如下命令：

dart --version

如能夠正確輸出版本號，則dart環境變量配置成功。

2. 下載開發工具

開發工具官方推薦是WebStorm，當然也可以使用Visual Studio Code，也可以使用命令工具創建、運行項目。如果想支持命令行運行項目，這樣快速方便些。可以安裝webdev和stagehand（這裏需要安裝執行下面這兩個命令）：

> pub global activate webdev
> pub global activate stagehand

安裝命令窗口：

注意：如果你想運行使用Dart2以下的版本，WebStorm版本至少要2018.1.3及以上。當然，現在基本都用Dart2及新版本開發了。

接下來下載安裝WebStorm：

WebStorm官方下載地址：https://www.jetbrains.com/webstorm/

3. 創建Dart Web項目

使用命令行創建：

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

使用WebStorm創建：

新建項目：

選擇Dart項目，點擊CREATE：

項目結構目錄如下圖：

運行項目：

運行後，可以看到控制檯顯示的日誌，如果看到類似的Dart Server啓動成功就可以訪問我們的頁面了：

頁面效果截圖：

可以看出，這裏我們的dart文件就是充當操作html的Dom樹的功能，也就是替代了JS的原始用法，不過最終運行時也是將dart文件編譯爲js文件運行，只不過dart語法比js的使用更加方便與強大。

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>

再重複下，我們也可以用Visual Studio Code進行開發，也可以使用命令創建和運行項目：

使用命令行創建：

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

命令行運行項目：

webdev serve

如果想將dart文件編譯轉爲js文件，使用dart sdk自帶的dart2js這個工具。基本用法：

dart2js -O2 -o test.js test.dart

test.js爲輸出的js文件的路徑+文件名；test.dart爲輸入的要轉換的dart文件的路徑+文件名。
更多參數和複雜用法命令，請看官方：https://webdev.dartlang.org/tools/dart2js

關於Dart Web開發環境搭建及新建運行項目就講解這麼多。

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