angular2 基于webpack环境搭建
目录结构：
angular-quickstart
|_ ts
|_ app.ts
|_ index.ts
|_ index.html
|_ package.json
|_ tsconfig.json
|_ webpack.config.js
1. angular-quickstart/package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "I will show you how to set up angular2 development angular-quickstart",
"keywords": [
"angular2",
"angular-quickstart"
],
"scripts": {
"start": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --watch --content-base",
"build": "webpack --progress --colors",
"dev": "webpack-dev-server"
},
"author": "Lin.keqing",
"license": "MIT",
"dependencies": {
"@angular/common": "^2.4.5",
"@angular/compiler": "^2.4.5",
"@angular/core": "^2.4.5",
"@angular/platform-browser": "^2.4.5",
"@angular/platform-browser-dynamic": "^2.4.5",
"@angular/forms": "^2.4.5",
"core-js": "^2.4.1",
"rxjs": "5.0.3",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@types/core-js": "^0.9.35",
"ts-loader": "^2.0.0",
"typescript": "^2.1.5",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}2. angular-quickstart/tsconfig.json
{
"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"
]
} 3. angular-quickstart/webpack.config.js
const {resolve} = require('path');
module.exports = {
entry: {
index: './ts/index.ts'
},
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
exprContextCritical: false,
rules: [
{
test: /\.ts$/,
use: ['ts-loader']
}
]
},
resolve: {
extensions: [
'.js',
'.ts'
]
}
};运行npm install
4. angular-quickstart/index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>environment</title>
</head>
<body>
<!--这里引用我们的第一个component-->
<my-app></my-app>
<!--加载使用webpack编译后的bundle-->
<script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>5. angular-quickstart/ts/app.ts
import {Component} from '@angular/core';
//声明第一个Component
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 AppApple</h1>'
})
export class AppComponent { }6. angular-quickstart/ts/index.ts
//不显示引入，你会得到"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';
//引入启动器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//引入我们刚才创建的第一个component
import { AppComponent } from './app';
//声明一个应用模块
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { }
//启动应用
platformBrowserDynamic().bootstrapModule(AppModule);运行 npm start
完。
一个下下来就可以用的环境：
https://github.com/angular/quickstart
配套的学习地址：
http://angular2.axuer.com/docs/ts/latest/guide/learning-angular.html
