溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
剛搭建完一個webpack+angular2環(huán)境，由于angular及webpack官網(wǎng)上沒有一個折中的搭建方案，所以只能摸索著搭建，中間遇到一些坑，遂總結記錄下來，以供交流。
搭建完后的項目初步環(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: `
<h2>{{title}}</h2>
<h3>My favorite hero is: {{myHero}}</h3>
`
})
// 使用變量初始化方式
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應用宿主頁面；
<!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自動創(chuàng)建該文件；
注意，此處如果引入的angular模塊版本是2.4.X，則會報錯“Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators”，產(chǎn)生此坑的具體原因尚不清楚，希望有朋友一起交流。
{
"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"]
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
