剛搭建完一個webpack+angular2環(huán)境，由于angular及webpack官網上沒有一個折中的搭建方案，所以只能摸索著搭建，中間遇到一些坑，遂總結記錄下來，以供交流。
創(chuàng)新互聯(lián)是一家專業(yè)提供新巴爾虎左企業(yè)網站建設,專注與成都網站建設、成都網站設計、HTML5、小程序制作等業(yè)務。10年已為新巴爾虎左眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站制作公司優(yōu)惠進行中。
搭建完后的項目初步環(huán)境如下：
app ----app.component.ts ----app.module.ts ----main.ts index.html package.json tsconfig.json webpack.config.js
app.componnet.ts：組件文件。angular2應用是由組件構成，組件控制視圖；
重慶分公司
重慶分公司
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
{{title}}
My favorite hero is: {{myHero}}
`
})
// 使用變量初始化方式
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}app.module.ts：應用跟模塊。angular是模塊化，擁有自己的模塊系統(tǒng)，被稱為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';
//引入創(chuàng)建的component
import { 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應用宿主頁面；
small胖的博客
package.json：一個標準化的npm說明文件，其中包含諸如當前應用的依賴包、自定義的腳本命令等，在cmd終端可用npm init自動創(chuàng)建該文件；
注意，此處如果引入的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的各項參數(shù)；
{
"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編譯打包的參數(shù)。
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"]
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
