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

發(fā)布時間：2016年10月26日作者：文章轉(zhuǎn)自網(wǎng)絡(luò)，版權(quán)歸原作者所有，反饋可立刻刪除 (該文來自筆記，點擊查看原文)

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

Webpack 入門指南 - 2.模塊

這一次，我們使用 Webpack 來打包 Angular 2 的應(yīng)用。

與官方的 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" }

黃色是新添加的包，我們可以自己編輯一個應(yīng)用寄宿的網(wǎng)頁，所以，這里將自動生成網(wǎng)頁的插件刪掉了。

打開控制臺窗口，執(zhí)行 npm install 將這些包安裝到你的本地。

2. 修改 tsconfig.json

為 TypeScript 的配置文件 tsconfig.json 再添加兩行，以便支持 decorator，這是一個 JavaScript 的新特性，Angular 2 到處使用這個特性。修改之后的文件內(nèi)容如下。

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

3. 創(chuàng)建應(yīng)用寄宿的網(wǎng)頁

這次，我們直接編輯寄宿的網(wǎng)頁，而不是自動生成。這是因為我們希望網(wǎng)頁中能夠添加一段為 Angular 2 應(yīng)用演出的舞臺。

<!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 標(biāo)記的一段，在 Angular 2 中，我們可以自定義標(biāo)記了，這個 my-app 就是我們應(yīng)用以后表演的舞臺了。

腳本的一段更加簡單，就是直接引用我們將要生成的腳本。

4. 創(chuàng)建第一個 Angular 2 組件

在 Angular 2 中，UI 的基本單位稱為組件 Component，一個組件映射到一個自定義的標(biāo)記上，我們可以自己來定義這個標(biāo)記實際的內(nèi)容。

在項目的根目錄下創(chuàng)建名為 AppComponent.ts 的文件，內(nèi)容如下。

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

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

@Component 就是聲明說我們要定義一個組件了，selector 定義了以后我們?nèi)绾蝸硎褂眠@個組件，我們在網(wǎng)頁中使用的 my-app 標(biāo)記就來自這里。template 就是在運行的時候，這個 my-app 實際上顯示為這個模板的內(nèi)容。這里就是一個一號的大標(biāo)題。

5. 定義 Module

Angular 2 定義個一個模塊的概念，相關(guān)的組件可以封裝為一個組件，概念我們以后慢慢學(xué)，這里先來一個看看。

在項目根目錄下，創(chuàng)建名為 app.module.ts 的文件，內(nèi)容如下。

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

import { AppComponent }  from './app.component';

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

它就是將剛剛定義的 AppComponent 封裝到一個 Module 中，注意其中的 bootstrap，是說通過這個組件啟動的化，會從 AppComponent 開始。可以理解為第一個界面。

6. 引導(dǎo)應(yīng)用

要想啟動應(yīng)用，Angular 2 提供了加載器。創(chuàng)建名為 app.ts 的文件，作為我們應(yīng)用的啟動文件。這里使用 Angular 2 提供的瀏覽器加載器來加載我們的啟動模塊。

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

platformBrowserDynamic().bootstrapModule( AppModule );

其實程序的基本結(jié)構(gòu)就已經(jīng)創(chuàng)建了。

但是，還有一個基本的文件需要解決。

在 Angular 2 中，底層依賴了許多基礎(chǔ)技術(shù)，比如說 ES6 的許多技術(shù)，這些當(dāng)前的 JavaScript 都不支持的，Angular 2 使用 core-js 提供了支持，另外還有 zone.js 等等庫的支持。為了提前加載這些依賴庫，我們需要創(chuàng)建一個名為 polyfills.browser.ts 的文件來加載這些庫，這個文件一般都不需要經(jīng)常修改。

// 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，然后引導(dǎo) Angular 2 應(yīng)用，所以，我們可以再創(chuàng)建一個 index.ts 來完成這個任務(wù)。內(nèi)容非常簡單。

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

7. 使用 Webpack 打包

最后，我們只需要告訴 webpack 從這個 index.ts 開始進(jìn)行打包就可以了，webpack 可以根據(jù)這個文件中 import 導(dǎo)入的模塊來找到其它相關(guān)的模塊，直到找到所有的模塊，然后進(jìn)行編譯，打包，最后輸出到 bundle.js 就可以了。這次沒有使用自動生成網(wǎng)頁，實際上，文件更短了，

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. 打包和運行

如果你已經(jīng)完成了前面的步驟，打開控制臺創(chuàng)建，直接執(zhí)行 webpack 命令，就會自動生成一個新的 bundle.js 文件了。

啟動你的瀏覽器，直接打開 index.html 網(wǎng)頁，應(yīng)該就可以看到你的第一個 Angular 2 界面了。

分類: Angular 2,javascript,Web Front

好文要頂關(guān)注我收藏該文

冠軍
關(guān)注 - 25
粉絲 - 2121

榮譽：推薦博客

+加關(guān)注

? 上一篇：Angualr2 - 使用 VS2015

posted on 2016-10-25 23:31 冠軍閱讀(128) 評論(2) 編輯收藏

mark 非常感覺好文必須頂。。
但是有兩個問題希望老師解答謝謝?。?br /> 問題 1
5. 定義 Module 中有一個錯誤，
導(dǎo)入組件 import { AppComponent } from './app.component';
是不是應(yīng)該改為： import { AppComponent } from './AppComponent';
組件名稱為： AppComponent.ts.

問題2
最后執(zhí)行打包時 webpack 本地拋了很多錯誤找不到組件。如圖：

但是不影響頁面運行。頁面能正常啟動并使用組件。

分類導(dǎo)航

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