冠军

导航

Webpack 入门指南 - 3. Hello, Angular2!

Webpack 入门指南 - 1.安装

Webpack 入门指南 - 2.模块

这一次,我们使用 Webpack 来打包 Angular 2 的应用。

与官方的 Hello, Angular 2 项目相比,我们不使用 System.js,而是使用 TypeScript 直接编译,然后使用 Webpack 打包生成代码。

1. 下载 Angular 2 以及依赖包

修改我们的 package.json 文件,添加 Angular 2 涉及的包,和 Angular 2 所依赖的包,以后,我们可以慢慢介绍各个包的用途,这个文件也可以保存起来,以后直接使用。

{
  "name": "w1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",

    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.26",
    "ie-shim": "^0.1.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.24.0",
    "ts-loader": "^0.9.5",
    "typescript": "^2.0.3",
    "webpack": "^1.13.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

黄色是新添加的包,我们可以自己编辑一个应用寄宿的网页,所以,这里将自动生成网页的插件删掉了。

打开控制台窗口,执行 npm install 将这些包安装到你的本地。

2. 修改 tsconfig.json

为 TypeScript 的配置文件 tsconfig.json 再添加两行,以便支持 decorator,这是一个 JavaScript 的新特性,Angular 2 到处使用这个特性。修改之后的文件内容如下。

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules"
  ]
}

 

3. 创建应用寄宿的网页

这次,我们直接编辑寄宿的网页,而不是自动生成。这是因为我们希望网页中能够添加一段为 Angular 2 应用演出的舞台。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, Angular2</title>
  </head>
  <body>

    <my-app>
      Loading...
    </my-app>

    <script src="./bundle.js"></script>
  </body>
</html>

 

就是 my-app 标记的一段,在 Angular 2 中,我们可以自定义标记了,这个 my-app 就是我们应用以后表演的舞台了。

脚本的一段更加简单,就是直接引用我们将要生成的脚本。

4. 创建第一个 Angular 2 组件

在 Angular 2 中,UI 的基本单位称为组件 Component,一个组件映射到一个自定义的标记上,我们可以自己来定义这个标记实际的内容。

在项目的根目录下创建名为 AppComponent.ts 的文件,内容如下。

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

 

@Component 就是声明说我们要定义一个组件了,selector 定义了以后我们如何来使用这个组件,我们在网页中使用的 my-app 标记就来自这里。template 就是在运行的时候,这个 my-app 实际上显示为这个模板的内容。这里就是一个一号的大标题。

5. 定义 Module

Angular 2 定义个一个模块的概念,相关的组件可以封装为一个组件,概念我们以后慢慢学,这里先来一个看看。

在项目根目录下,创建名为 app.module.ts 的文件,内容如下。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './AppComponent ';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

 

它就是将刚刚定义的 AppComponent 封装到一个 Module 中,注意其中的 bootstrap,是说通过这个组件启动的化,会从 AppComponent 开始。可以理解为第一个界面。

6. 引导应用

要想启动应用,Angular 2 提供了加载器。创建名为 app.ts 的文件,作为我们应用的启动文件。这里使用 Angular 2 提供的浏览器加载器来加载我们的启动模块。

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

platformBrowserDynamic().bootstrapModule( AppModule );

 

其实程序的基本结构就已经创建了。

但是,还有一个基本的文件需要解决。

在 Angular 2 中,底层依赖了许多基础技术,比如说 ES6 的许多技术,这些当前的 JavaScript 都不支持的,Angular 2 使用 core-js 提供了支持,另外还有 zone.js 等等库的支持。为了提前加载这些依赖库,我们需要创建一个名为 polyfills.browser.ts 的文件来加载这些库,这个文件一般都不需要经常修改。

// Polyfills

import 'ie-shim'; // Internet Explorer 9 support

// import 'core-js/es6';
// Added parts of es6 which are necessary for your project or your browser support requirements.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
// import 'core-js/es6/promise';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';

 

最后,我们希望 Webpack 先引入这个 polyfills,然后引导 Angular 2 应用,所以,我们可以再创建一个 index.ts 来完成这个任务。内容非常简单。

import "./polyfills.browser";
import "./app";

 

7. 使用 Webpack 打包

最后,我们只需要告诉 webpack 从这个 index.ts 开始进行打包就可以了,webpack 可以根据这个文件中 import 导入的模块来找到其它相关的模块,直到找到所有的模块,然后进行编译,打包,最后输出到 bundle.js 就可以了。这次没有使用自动生成网页,实际上,文件更短了,

var HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口
    entry: "./index.ts",
    // 输出的文件名
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['', '.ts', '.js']
    },
    module: {
        loaders: [
            // all files with a `.ts` extension will be handled by `ts-loader`
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    }
};

 

8. 打包和运行

如果你已经完成了前面的步骤,打开控制台创建,直接执行 webpack 命令,就会自动生成一个新的 bundle.js 文件了。

启动你的浏览器,直接打开 index.html 网页,应该就可以看到你的第一个 Angular 2 界面了。

 

在 Typescript 2.0 中使用 @types 类型定义

 

posted on 2016-10-25 23:31  冠军  阅读(4583)  评论(10编辑  收藏