《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 组件了。

祝你有一个好的开始！