angular2初入视线之－搭个环境

2019年8月30日 222次阅读来源: leftstick

angular2是什么？我猜不容我赘述，列位肯定略有耳闻，无论是曾AngularJS的拥趸，亦或是React的粉丝，都或多或少的对她有过一点相识。未见其物、先闻其声，angular2在问世之前已做足了宣扬，想必诸位也肯定被下面种种辞汇所震慑，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive Programming、 Decorators、 System.js、 webpack…，信口开河，美不胜收！但我们不禁要问，“都说AngularJS学习曲线峻峭，也没陡出这些个莫名辞汇！”，angular2终究该怎样上手？看了这些个知识点，有木有吓得手抖，都搞不清从那边入手了！？

本教程宗旨：多些操纵、少点说教(理论是进阶必需的，万万不要误读)，让我们从实践中追随真谛吧！

本章源码：environment

本章运用angular2版本为：2.4.5, webpack版本为: 2.2.0

引荐开辟东西

vscode

这里我引荐运用vscode(谅解我变了，之前引荐的是atom)。很爽的哦！

建立项目

mkdir environment
cd environment
npm init

依据npm init发问，建立package.json文件，建立后去掉不必要的字段，像如许即可：

{
  "name": "environment",
  "version": "1.0.0",
  "description": "I will show you how to set up angular2 development environment",
  "keywords": [
    "angular2",
    "environment"
  ],
  "scripts": {
    "start": "webpack-dev-server --hot--host 0.0.0.0"
  },
  "author": "Howard.Zuo",
  "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"
  }
}

装置依靠

npm install

@angular: 这个必需的，没意见吧？之所以分了多个包，这是最新2.1.2的变化，能够按需引入，增添灵活性
core-js: javascript的一个规范库完成，包含了大批ES2015, ES2016的ES5完成
rxjs: 一个Reactive Programming的JavaScript完成。这里对她的依靠是因为angular2支撑多种数据更新形式，比方：flux、Rx.js
zone.js: 用来对异步使命供应Hooks支撑，使得在异步使命运转之前/今后做分外操纵成为可能。在angular2里的重要运用场景是进步脏搜检效力、下降机能消耗。
webpack: 我们这里运用webpack2对源码举行编译、打包，而不是用官网引见的System.js的运转时加载、诠释、实行。兼并打包的优点不必我多说吧？削减请求数、uglify、预搜检…
webpack-dev-server: 一个轻量级的，支撑webpack编译的静态服务器(调试东西)，本章节我们就用它启动顺序
ts-loader: TypeStrong出品的TypeScript加载器，经由过程该加载器，TypeScript源码能够顺遂被编译成ES5代码
typescript: angular2官方引荐的开辟言语，我们在教程里也将运用该言语举行代码编写
@types/core-js: 自typescript 2.0.0今后，运用@types治理声明文件，因为angular2依靠ES2015的诸多特征，比如：Promise、Map等，所以须要引入这些API的声明

第一个示例

建立`index.html`

touch index.html

向适才建立的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>

建立`app.ts`

mkdir ts
touch ts/app.ts

向适才建立的ts/app.ts里增加以下内容：

import {Component} from '@angular/core';

//声明第一个Component
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

建立`index.ts`

touch ts/index.ts

向适才建立的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);

建立`webpack.config.js`

touch webpack.config.js

向适才建立的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'
        ]
    }
};

建立`tsconfig.json`

touch tsconfig.json

向适才建立的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"
    ]
}

运转

好了，到目前为止，我们第一个示例的开辟/运转环境就基础搭好了，如今启动碰运气：

npm start

你会看到：

《angular2初入视线之－搭个环境》

下回预报：牛刀小试component

    原文作者：leftstick
    原文地址: https://segmentfault.com/a/1190000004930079
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

引荐开辟东西

vscode

建立项目

装置依靠

第一个示例

建立index.html

建立app.ts

建立index.ts

建立webpack.config.js

建立tsconfig.json

运转

建立`index.html`

建立`app.ts`

建立`index.ts`

建立`webpack.config.js`

建立`tsconfig.json`