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 lang="en">
    <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

优质内容筛选与推荐>>
1、小练习：图片轮播jQuery版
2、优秀程序员的标准
3、[Algorithms(Princeton)] Week1 - Percolation
4、Go语言变量作用域
5、0406复利计算——结队

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看