摘要：今年月份，官方發布了新版，新版本的特性已經有很多文章了，在此不一一贅述。組件是系統中最重要的基本構造塊之一。但是由于目前不支持裝飾器語法，因此通過方法完成這一工作。本文主要是提供一個基于的，如有問題，歡迎留言探討。

原文發表于本人的個人博客，地址：Angular4的QuickStart——With ES6 Not TypeScript，歡迎反饋探討。

今年3月份，Angular官方發布了新版——Angular4.0.0，新版本的特性已經有很多文章了，在此不一一贅述。

但從Angular2.x以來，JavaScript版本的官方文檔就從未完整過，而ES6的QuickStart也從未在日程之內，這對初學者而言多少有點不太友好。雖然網上有ES6+Angular2.x的QuickStart，但是多少有點問題，而且跟Angular4有些不一樣，也過時了。今天為了折騰Angular4到處找文檔查資料，搞了好久才搞定一個“hello world”，實在有些不爽，為了幫助像我一樣的初學者，我覺得把這個ES6的QuickStart寫出來也許會有點用。

NOTE:本文實現的內容與官方文檔中的QuickStart實現的內容沒有區別，只是本文是用ES6實現的，而非JavaScript或TypeScript.

廢話少說，show the code.

首先是開發環境，先上package.json：

//package.json
{
  "name": "angular4-quickstart-es6-webpack",
  "version": "1.0.0",
  "description": "The Angular 4 Quickstart tutorial done in ES6 with webpack and Babel, without using TypeScript.",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server",
    "webpack": "webpack --progress",
    "postinstall": "npm run webpack"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "script-loader": "^0.6.1",
    "webpack": "^1.12.14"
  }
}

除了Angular官方文檔中列出的包和工具之外，還包括了ES6的相關模塊及其轉碼工具Babel。package.json配置好了之后就可以開始配置開發環境了，

目錄結構：

開發環境：

開發環境的配置需要安裝Node(官網)，然后安裝webpack，

npm install webpack -g

然后在nges6目錄下執行：

npm install

或者執行：

cnpm install

安裝時間可能會有點長，耐心等待，安裝完成后，開發所需要的包就會被下載到node_modules文件夾中，接下來是webpack的配置文件：

//webpack.config.js
var path = require("path");
module.exports = {
    entry: path.join(__dirname, "public", "src","index.js"),
    output: {
        path: path.join(__dirname, "public", "dist"),
        filename: "vendor.js"
    },
    devtool: "source-map",
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]
                }
            },
        ]
    }
}

配置文件中我們定義了入口文件(public/src/index.js)，然后定義了輸出路徑和輸出文件的命名(public/dist/vendor.js)，webpack將把我們需要的全部依賴打包到一個文件中(vendor.js)，這樣我們在HTML中只要用一個script標簽引入這個文件就可以了(暫不考慮懶加載的問題)。

不知道上面這部分在說什么的同學，請先以“nodejs”、“npm”、“webpack”等關鍵詞搜索網上的資料。

組件

Angular從2.0開始組件化，關于組件，中文文檔中介紹說：“組件是一個 Angular 類，用于把數據展示到視圖 (view)，并處理幾乎所有的視圖顯示和交互邏輯。組件是 Angular 系統中最重要的基本構造塊之一。”組件是一個應用的基礎構成，所以，我們首先在app.component.js中定義一個“組件”：

//app.component.js
import {Component} from "@angular/core";

class AppComponent {
    static get annotations() {
        return [
            new Component({
                selector: "my-app",
                template: "
My First Angular 2 App
"
            }),
        ];
    }
    
    constructor () {}
}

export {AppComponent};

在組件的定義中，需要用裝飾器(Decorator)將組件的元數據附加到類上，然后Angular根據這些元數據創建一個組件實例。但是由于ES6目前不支持裝飾器語法，因此通過static get annotations()方法完成這一工作。

模塊：

Angular是以模塊的形式來組織代碼，每個Angular應用都至少有一個根模塊(Root Module)，所以接下來是app.module.js:

//app.module.js
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component";

class AppModule{
    static get annotations() {
        return [
            new NgModule({
                imports: [ BrowserModule ],
                declarations: [ AppComponent ],
                  bootstrap: [ AppComponent ]
            })
        ];
    }
}

export {AppModule};

首先用ES6中的import關鍵字導入依賴的包(platform-browser/core)以及我們編寫的組件(app.component)，然后用class關鍵字聲明我們的根模塊(AppModule)。關于impors、declarations、bootstrap的含義，請查閱官方文檔中關于根模塊的部分官方文檔鏈接

啟動引導：

在main.js中啟動(bootstrap)根模塊，這個引導文件基本上只寫這一次就OK了:

//main.js
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app.module";

let boot = document.addEventListener("DOMContentLoaded", () => {
    platformBrowserDynamic().bootstrapModule(AppModule);
});

module.exports = boot;

index.js

index.js用于告訴webpack需要打包的依賴都有哪些。

//index.js
require("!!script!../../node_modules/es6-shim/es6-shim.min.js");
require("!!script!../../node_modules/core-js/client/shim.min.js");
require("!!script!../../node_modules/zone.js/dist/zone.js");
require("!!script!../../node_modules/rxjs/bundles/Rx.min.js");
require("!!script!../../node_modules/@angular/core/bundles/core.umd.js");
require("!!script!../../node_modules/@angular/common/bundles/common.umd.js");
require("!!script!../../node_modules/@angular/compiler/bundles/compiler.umd.js");
require("!!script!../../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js");
require("!!script!../../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js");


require("./app/main");

index.html

最后是index.html文件：

    
    



    Loading...

    

代碼寫好了，接下來是兩個命令：

webpack --progress
npm start

這兩個命令會將所有需要的js模塊打包到vendor.js中，并啟動一個本地服務器，調用你的瀏覽器，你會看到你的應用跑起來了：

由于本人也是入門級選手，很多東西也沒搞清楚，所以文章寫得很簡單。但是其中的諸多概念都有不少文章有所論述，可以在網上查到，我也不可能說得更明白，所以就不拾人牙慧了，更深入的內容留待以后探討。本文主要是提供一個基于webpack+ES6的QuickStart，如有問題，歡迎留言探討。

如需轉載，請注明原文鏈接。