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

musicq發表於2019-02-16
Angular

環境搭建

如果你已經迫不及待想要跳過教程直接開始自己折騰了，這裡已經有一份現成的專案備份了。你可以執行下列命令立刻開始自己第一個 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 元件了。

祝你有一個好的開始！

相關文章