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

时间 2019-11-20

标签 webpack 入门指南 hello angular2 angular 栏目 AngularJS 繁體版

原文原文链接

Webpack 入门指南 - 1.安装

Webpack 入门指南 - 2.模块

这一次，咱们使用 Webpack 来打包 Angular 2 的应用。html

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

1. 下载 Angular 2 以及依赖包

修改咱们的 package.json 文件，添加 Angular 2 涉及的包，和 Angular 2 所依赖的包，之后，咱们能够慢慢介绍各个包的用途，这个文件也能够保存起来，之后直接使用。webpack

{
  "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"
}

黄色是新添加的包，咱们能够本身编辑一个应用寄宿的网页，因此，这里将自动生成网页的插件删掉了。git

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

2. 修改 tsconfig.json

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

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

3. 建立应用寄宿的网页

此次，咱们直接编辑寄宿的网页，而不是自动生成。这是由于咱们但愿网页中可以添加一段为 Angular 2 应用演出的舞台。web

<!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 就是咱们应用之后表演的舞台了。typescript

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

4. 建立第一个 Angular 2 组件

在 Angular 2 中，UI 的基本单位称为组件 Component，一个组件映射到一个自定义的标记上，咱们能够本身来定义这个标记实际的内容。json

在项目的根目录下建立名为 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 类型定义