《Angular2 從開發到部署系列》之「環境搭建」

環境搭建

若是你已經火燒眉毛想要跳過教程直接開始本身折騰了，這裏已經有一份現成的項目備份了。你能夠運行下列命令馬上開始本身第一個 Angular2之旅。

# 下載項目
git clone https://github.com/musicq/angular2-webpack-express-starter.git

# 安裝依賴
npm install

# 啓動
npm start

環境要求

• node v4.5.0+

之因此選擇 4.x.x 的版本是由於咱們要搭建的 Angular2 的應用是想要一個可以較爲穩定的環境，並且並不須要太多 node 新版本的功能，只須要用到一些 es6 的新特性就夠了。若是你追求新的更酷的 node 新特性，也可使用 6.x.x 以上的版本。

建立項目

首先爲咱們的應用起一個你喜歡的名字，這裏我想爲它起名爲 awesome-start。

cd ~

# 建立項目目錄
mkdir awesome-start && cd awesome-start

# 初始化項目
npm init -y

到目前爲止咱們已經成功建立了咱們的項目，Angular2 並不像 Angular1 那樣有一個單獨的 js 文件，他是經過 npm 安裝的，因此爲了可以讓咱們的應用可以跑起來，咱們須要往項目裏面添加一些列的配置文件來搭建咱們的 Angular2 應用。

配置文件

有不少種方法可以把 Angular2 跑起來，官方的 git@quickstart 是一種最爲快捷的方法，只須要把他 clone 下來，安裝後直接啓動就好了。這個項目用來學習 ng2 很好，若是想要用在產品和中大型應用開發的話，仍是不太合適。咱們這裏使用的是 webpack 來打包咱們的應用。

爲了可以配置好咱們的項目，你須要在項目中加入如下幾個文件

• package.json 此文件在咱們初始化時已經自動添加了

• tsconfig.json 定義了 TypeScript 編譯器如何從項目源文件生成 JavaScript 代碼

• webpack.config.js webpack 入口文件，用來告訴 webpack 如何打包咱們的應用

完整的代碼能夠在 這裏@package.json 找到，爲了節約篇幅，這裏只列出主要的幾項內容。

// @angular2 的依賴包

"dependencies": {
    "@angular/common": "^2.1.0",
    "@angular/compiler": "^2.1.0",
    "@angular/core": "^2.1.0",
    "@angular/forms": "^2.1.0",
    "@angular/http": "^2.1.0",
    "@angular/platform-browser": "^2.1.0",
    "@angular/platform-browser-dynamic": "^2.1.0",
    "@angular/platform-server": "^2.1.0",
    "@angular/router": "^3.1.0",
    
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
}

上面的依賴是幾乎每個 Angular2 應用必須的內容。將 完整的 package.json 所有安裝好以後咱們就能夠進入下一步了。

# 安裝依賴
npm install

webpack 打包配置

到這裏，咱們已經把咱們整個應用主要的依賴所有安裝完成了。接下來咱們只要專心寫配置和內容就行了。

咱們想要讓咱們的程序可以無論在正式環境仍是開發環境都能很方便的切換，因此咱們須要兩份甚至更多的 webpack 配置文件（測試環境）來應對更多的場景需求。

@webpack.config.js

這是 webpack 的入口文件，咱們根據不一樣的環境切換不一樣的打包規則。

switch (process.env.NODE_ENV) {
    case 'prod':
    case 'production':
        module.exports = require('./config/webpack.prod')({env: 'production'});
        break;
    case 'dev':
    case 'development':
    default:
        module.exports = require('./config/webpack.dev')({env: 'development'});
}

@webpack.common.js webpack 通用配置截取

{
    ...,
    
    entry: {
        polyfills: './src/polyfills',
        vendor: './src/vendor',
        main: './src/main',
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    // 使 angular2 支持 webpack 1.x 懶加載
                    'angular2-router-loader'
                ],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            { // 處理全局樣式
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap', 'postcss')
            },
            { // 處理組件內樣式
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loaders: ['to-string-loader', 'css-loader', 'postcss']
            },
            {
                test: /\.html$/,
                loader: 'raw-loader',
                exclude: [helpers.root('src/index.html')]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            }
        ],
    ...
}

@webpack.dev.js webpack 開發環境打包配置截取。

不少同窗每每都會同時作 node 跟前端開發，改了前端代碼要刷新一次瀏覽器，改了後端代碼又要重啓一次瀏覽器，真的費時費力還沒效率，因此爲了可以讓咱們兩端都可以不用手動刷新，咱們在 webpack 的開發環境配置時加入一個代理，代理咱們後端的地址，這樣就避免了先後端不能同時一塊兒開發的問題，還能應用 webpack-dev-server 特色實時刷新瀏覽器。

devServer: {
    port: METADATA.port,
    host: METADATA.host,
    historyApiFallback: true,
    stats: 'minimal',
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    outputPath: helpers.root('dist'),
    // 將 node 服務轉接到 4000 端口
    // 這樣就能夠同時得到 webpack-dev-server 的實時刷新
    // 也能同時調試接口
    proxy: {
        '/api': {
              target: 'http://localhost:4000'
        }
    }
},

@webpack.prod.js webpack 正式環境打包配置截取。

output: {

    path: helpers.root('dist'),

    /**
     * 插入文件的訪問路徑
     * Example:
     * [webpack.config.js] publicPaht: '/dist'
     * [index.html] <script src="/dist/a.js"></script>
     */
    publicPath: '/',

    filename: '[name].[chunkhash].bundle.js',

    sourceMapFilename: '[name].[chunkhash].bundle.map',

    chunkFilename: '[id].[chunkhash].chunk.js'
},

可執行腳本

在咱們的 package.json 中有一個 script 字段，這裏面有咱們程序可執行的一系列腳本。

"scripts": {
    "start": "concurrently \"npm run start:hmr\" \"npm run dev:server\"",
    "start:hmr": "npm run server:dev:hmr",
    "server": "npm run server:dev",
    "server:dev": "webpack-dev-server --progress --profile --watch --content-base dist/",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:prod": "pm2 start process.yml",
    "dev:server": "NODE_ENV=development nodemon --use_strict bin/www",
    "build:prod": "npm run clean && webpack --progress --profile --bail",
    "lint": "tslint \"src/**/*.ts\" -t verbose",
    "clean": "npm run rimraf -- dist",
    "rimraf": "rimraf"
}

• start: 「開發環境」 啓動咱們的程序，同時啓動前端和後端，而且爲熱更新

• start:hmr: 「開發環境」 啓動 webpack 打包前端程序並啓動前端，端口爲 3000

• dev:server: 「開發環境」 啓動 node 服務，端口爲 4000

• build:prod: 「正式環境」 打包應用，準備部署

• lint: 「開發環境」 測驗 TypeScript 代碼是否符合咱們自定義的規範

小結

本章咱們介紹了一個 Angular2 應用的環境配置。很麻煩是否是，沒錯，因爲 Angular2 此次的徹底組件化，咱們只能從 npm 安裝它，這就使得對 node 不熟悉的同窗更頭疼了，再加上前端一堆繁瑣複雜的打包和任務工具，使得這個配置又增長了很大的複雜度。複雜是一件好事，由於他說明前端正向着工程化進展。不過對於首次接觸的同窗來講真的是很難找到入手點，不要緊，你徹底能夠無論這些配置怎麼樣，直接用官方提供的 git@quickstart 來進行你的 Angular2 的學習，等你熟練了，再慢慢重構本身的項目，使得它可以更加健壯。

或者，你也能夠選擇個人這套方案，使用方法很簡單，你只要照着 這份 README 作就能夠了。若是一切都很順利的話，當你安裝完成後，只要運行 npm start，你的程序就能跑起來了。

若是失敗了，也別怕，你能夠在 這裏 提出你的問題，我會在看到後第一時間盡力爲你解答。

Ok，下面一章咱們就要講如何開始一個 Angular2 組件了。

祝你有一個好的開始！