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' }
        ]
    }
};