前端之Angular2實戰：基於Webpack與ES6的Angular2工程搭建

​筆者在以前的開發流中習慣了Webpack+ES6+React的Workflow，Angular2自己也是秉持的模塊的思想，所以筆者在學習Angular2的時候首先想到的也就是將本來流程裏的React變爲Angular2。Angular2官網上的Quick Start是用的TypeScript，準確的說，是AtScript的規範。Angular2自己引入了大量的第三方庫，就像官方示例上面的，有JSPM的System、Reflect等等，這也給搭建環境時形成了必定的困擾。本節的代碼筆者已經上傳到了Github。Webpack的安裝與基本使用就不在這邊贅述，沒學過的小夥伴能夠看筆者其餘的博文。

Setup

Directory(文件目錄)

|package.son 存放nom相關的配置

|webpack.config.js 存放webpack相關的配置

|assets 存放代碼以及資源文件

├── common 存放通用的資源文件

│   ├── font 字體文件

│   ├── css 通用樣式文件

│   └── img 圖片文件

├── components 組件

│   ├── hello

│   │   └── hello.js

│   └── helloTemplate

│       ├── helloTemplate.html

│       └── helloTemplate.js

├── main.js 入口文件

├── models 模型以及數據類

├── services 服務

├── utils 工具類

└── widgets 界面插件類

package.json

搭建環境須要大量的Npm依賴項，都列舉在了下面：

{
  "name": "angular2-es6-webpack-quickstart",
  "version": "0.0.1",
  "description": "repository for starter with angular2,es6 and webpack",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "angular2",
    "es6",
    "webpack"
  ],
  "author": "chevalier",
  "license": "ISC",
  "dependencies": {
    "angular2": "^2.0.0-alpha.37",
    "reflect-metadata": "^0.1.1",
    "rx": "^2.5.3",
    "zone.js": "^0.5.4"
  },
  "devDependencies": {
    "a1atscript": "^0.4.4",
    "autoprefixer-loader": "^2.0.0",
    "babel": "^5.8.23",
    "babel-core": "^5.8.23",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.4",
    "image-webpack-loader": "^1.6.1",
    "imagemin": "^3.2.0",
    "node-sass": "^3.3.2",
    "react-mixin": "^1.7.0",
    "sass-loader": "^2.0.1",
    "scss-loader": "^0.0.1",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.0",
    "typescript": "^1.6.0-beta",
    "typescript-simple-loader": "^0.3.7",
    "es6-shim": "^0.33.1",
    "ng-annotate": "^1.0.2",
    "raw-loader": "^0.5.1",
    "ng-annotate-webpack-plugin": "^0.1.2"
  }
}

webpack.config.js

存放Webpack配置：

var path = require('path');
module.exports = {
    entry: path.resolve(__dirname, 'assets/main.js'),
    // Config for our build files
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /\.jsx$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
            {test: /\.(es6|js)$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
            {test: /\.(png|jpg|ttf|woff|svg|eot)$/, loader: 'url-loader?limit=8192'},// inline base64 URLs for <=8k images, direct URLs for the rest
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions'
            },
            // support for .html as raw text
            {test: /\.html$/, loader: 'raw'},
            {
                test: /\.(scss|sass)$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions!sass?sourceMap'
            },
            {
                test: /\.ts$/,
                exclude: /(libs|node_modules)/,
                loader: 'typescript-simple',
                query: {
                    'ignoreWarnings': [
                        2300, // 2300 -> Duplicate identifier
                        2309, // 2309 -> An export assignment cannot be used in a module with other exported elements.
                        2346, // 2346 -> Supplied parameters do not match any signature of call target.
                        2432  // 2432 -> In an enum with multiple declarations, only one declaration can omit an initializer for its first enum element.
                    ]
                }
            }
        ],
    },
    externals: {
        jquery: "jQuery",
        pageResponse: 'pageResponse'
    },
    resolve: {
        alias: {
            libs: path.resolve(__dirname, 'libs'),
            nm: path.resolve(__dirname, "node_modules")
        }
    }
};

HelloWorld

環境搭建完畢，天然要開始寫咱們的HelloWorld。這裏組件的模塊化以及引入都是用的ES6的語法，而後經過Webpack統一編譯。利用Webpack一樣能夠支持AtScript的語法：

hello.js

/**
 * Created by apple on 15/9/14.
 */
import 'nm/reflect-metadata/Reflect.js';
import 'nm/zone.js/lib/zone.js';
import 'nm/es6-shim';
import { Component, View, bootstrap } from 'nm/angular2/angular2';

@Component({
    selector: 'my-app'
})

@View({
    template: '<h1>Hello {{ name }}</h1>'
})

class MyAppComponent {
    constructor() {
        this.name = 'World';
    }
}

bootstrap(MyAppComponent);

main.js

import {MyAppComponent} from "./components/hello/hello.js";

import {HelloTemplateComponent} from "./components/helloTemplate/helloTemplate.js";

import {Component, View, bootstrap} from 'nm/angular2/angular2';

bootstrap(MyAppComponent);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<my-app></my-app>
</body>
<script src="dist/bundle.js"></script>
</html>

Run

npm install http-server -g
http-server

而後打開localhost:8080便可以看到Angular2爲咱們渲染的新界面。