剛搭建完一個webpack+angular2環境，由于angular及webpack官網上沒有一個折中的搭建方案，所以只能摸索著搭建，中間遇到一些坑，遂總結記錄下來，以供交流。
搭建完后的項目初步環境如下：
app----app.component.ts----app.module.ts----main.tsindex.htmlpackage.jsontsconfig.jsonwebpack.config.js
app.componnet.ts：組件文件。angular2應用是由組件構成，組件控制視圖；
import { Component } from '@angular/core';@Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> `})// 使用變量初始化方式export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm';}app.module.ts：應用跟模塊。angular是模塊化，擁有自己的模塊系統，被稱為angular模塊或NgModules（深入了解）；//缺少下述模塊引入，會輸出"Uncaught reflect-metadata shim is required when using class decorators"的錯誤
import 'core-js/es6';import 'core-js/es7/reflect';import 'zone.js/dist/zone';//引入NgModule裝飾器import { NgModule } from '@angular/core';//引入瀏覽器模塊import { BrowserModule } from '@angular/platform-browser';//引入創建的componentimport { AppComponent } from './app.component';@NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ]})export class AppModule { }main.ts：用于引導跟模塊啟動應用；
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; //引導跟模塊啟動應用platformBrowserDynamic().bootstrapModule(AppModule);index.html：angular應用宿主頁面；<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>small胖的博客</title></head><body> <my-app></my-app> <script src="dist/bundle.js"></script></body></html>package.json：一個標準化的npm說明文件，其中包含諸如當前應用的依賴包、自定義的腳本命令等，在cmd終端可用npm init自動創建該文件；
注意，此處如果引入的angular模塊版本是2.4.X，則會報錯“Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators”，產生此坑的具體原因尚不清楚，希望有朋友一起交流。
{ "name": "blogcode", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "ts-loader": "2.0.0", "@angular/common": "2.1.2", "@angular/compiler": "2.1.2", "@angular/core": "2.1.2", "@angular/platform-browser": "2.1.2", "@angular/platform-browser-dynamic":"2.1.2", "rxjs": "5.0.0-beta.12", "zone.js": "0.6.26", "core-js": "^2.4.1" }, "devDependencies": { "webpack": "^2.2.1", "@types/core-js": "^0.9.35", "typescript": "^2.1.5", "webpack": "^2.2.0", "webpack-dev-server": "^2.3.0" }, "scripts": { "test": "echo /"Error: no test specified/" && exit 1" }, "repository": { "type": "git", "url": "https://git.coding.net/frankshin/xudengwei.git" }, "author": "", "license": "ISC"}tsconfig.json：用于定義typescript編譯成ES5的各項參數；
{ "compilerOptions": { "module": "commonjs", "target": "es5", "moduleResolution": "node", "noImplicitAny": true, "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "declaration": false }, "buildOnSave": false, "compileOnSave": false, "exclude": [ "node_modules" ]}webpack.config.js：一個標準化的commonjs文件，用于配置webpack編譯打包的參數。
module.exports = { entry: "./app/main.ts", output: { path: __dirname + '/dist', filename: "bundle.js" }, module: { rules: [ { test: //.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }};以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
