angular2初入眼帘之－搭个环境
angular2 是什么？我猜不容我赘述，各位一定略有耳闻，无论是曾经 AngularJS 的拥趸，亦或是 React 的粉丝，都或多或少的对她有过一点了解。未见其物、先闻其声， angular2 在问世之前已经做足了宣传，想必诸位也一定被下面各种词汇所震慑，什么： TypeScript 、 ES5 、 ES6 、 Dart 、 Immutable 、 Unidirectional Data Flow 、 Reactive Programming 、 Decorators 、 System.js 、 webpack ...，天花乱坠，美不胜收！但我们不禁要问，“都说 AngularJS 学习曲线陡峭，也没陡出这些个莫名词汇！”， angular2 究竟该如何上手？看了这些个知识点，有木有吓得手抖，都搞不清从何处入手了！？
本教程主旨：多些操作、少点说教(理论是进阶必须的，千万不要误读)，让我们从实践中追寻真理吧！
本章源码： environment
推荐开发工具
Atom
这里我推荐使用 Atom ，以及她的 TypeScript 插件 atom-typescript 。很爽的哦！
创建项目
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" ], "author": "Howard.Zuo", "license": "MIT" }安装运行时依赖
npm install --save --save-exact angular2 es6-shim reflect-metadata@0.1.2 rxjs@5.0.0-beta.2 zone.js-
angular2 : 这个必须的，没意见吧？
-
es6-shim :
angular2依赖了大量ES2015的特性，这可能导致一些不支持ES2015特性的浏览器无法运行angular2程序(例如：老版本IE)。所以需要该shim来保证老浏览器的正确性 -
reflect-metadata :
angular2允许开发者使用Decorator，这使得程序具备更好的可读性。无奈Decorator是ES2016里的提案，需要reflect-metadata提供反射API才能使用 -
rxjs : 一个
Reactive Programming的JavaScript实现。这里对她的依赖是因为angular2支持多种数据更新模式，比如： flux 、 Rx.js -
zone.js : 用来对异步任务提供
Hooks支持，使得在异步任务运行之前/之后做额外操作成为可能。在angular2里的主要应用场景是提高脏检查效率、降低性能损耗。
安装开发环境依赖
npm install --save-dev webpack ts-loader typescript lite-server concurrently-
webpack : 我们这里使用
webpack对源码进行编译、打包，而不是用官网介绍的System.js的运行时加载、解释、执行。合并打包的好处不用我多说吧？减少请求数、uglify、预检查... -
ts-loader :
TypeStrong出品的TypeScript加载器，通过该加载器，TypeScript源码可以顺利被编译成ES5代码 -
typescript :
angular2官方推荐的开发语言，我们在教程里也将使用该语言进行代码编写 -
lite-server : 一个轻量级的静态服务器，本章节我们就用它启动程序
-
concurrently : 这是一个可以让多个阻塞命令同时执行、管理的工具。我们将在后面用到
第一个示例
创建 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 'angular2/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 里添加如下内容：
/// <reference path="../node_modules/angular2/typings/browser.d.ts"/> import 'es6-shim'; import 'angular2/bundles/angular2-polyfills'; import {bootstrap} from 'angular2/platform/browser'; //引用上一步创建的app.ts import {AppComponent} from './app'; //启动程序 bootstrap(AppComponent); 创建 webpack.config.js
touch webpack.config.js 向刚才创建的 webpack.config.js 里添加如下内容：
'use strict'; var path = require('path'); module.exports = { entry: { index: './ts/index.ts' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: 'dist/' }, module: { loaders: [ { test: //.ts$/, loader: 'ts' } ] }, resolve: { extensions: [ '', '.js', '.ts' ] } }; 创建 tsconfig.json
touch tsconfig.json 向刚才创建的 tsconfig.json 里添加如下内容：
{ "compilerOptions": { "noImplicitAny": true, "removeComments": true, "module": "commonjs", "target": "es5", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "declaration": false }, "buildOnSave": false, "compileOnSave": false, "exclude": [ "node_modules" ], "atom": { "rewriteTsconfig": true, "formatOnSave": true } } 为 package.json 增加常用命令
向 package.json 中，增加 scripts 属性，内容如下：
"scripts": { "watch": "webpack -w", "start": "concurrently /"npm run watch/" /"lite-server/"" }运行
好了，到目前为止，我们第一个示例的开发/运行环境就基本搭好了，现在启动试试看：
npm run start你会看到：
下回预告：牛刀小试 component
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
