angular2環境搭建

標籤：版本   on()   rod   zip   port   show   文檔   tom   uil   

Angular2.x與Angular1.x完全不同，Angular2.x是不相容Angular1.x的，所在在架構的構造上，它們是完全不同的。在Angular2.x中，因為其是基於ES6來開發的，所以會有很多第三方依賴。由於很多瀏覽器還不支援ES6，所以Angular2引入了很多polyfill或者shim, 導致我們引入了第三方依賴。

官方的說法，它是基於資料流的構建系統（streaming build system），主要用來讓自動化和增強你的工作流程（Automate and enhance your workflow)。

1.安裝 node v6.x.x      npm 3.x.x    gulp    有興趣的可以安裝typescript

 

gulp的安裝    npm install -g 全域安裝環境

gulp 教程:https://www.w3ctech.com/topic/134
中文網：http://www.gulpjs.com.cn/

2.建立專案檔夾（英文）

3.在github上clone相關檔案，並放入相關配置項
　　地址：https://github.com/Jasonwang911/angular2

4.package.json檔案：用來戳印金鑰目所需的npm依賴包

這是一個gulp的工作流程，在gulp中我們部署的函數都是由gulp.task來執行的，這個檔案的主要做的工作是　　　　

1.對angular2源碼進行轉換，將es6代碼轉換為es5代碼，然後合并成angular2.js，放入dest/lib目錄
2.將angular2的第三方依賴放入dest/lib目錄
3.自動監測使用者寫的代碼，當檔案發生修改時，自動將其編譯為es5代碼，然後放入dest目錄
4.開啟一個本機伺服器，讓使用者訪問http://localhost:3456/ 就可以看到頁面效果
5.刪除dest目錄

如果想瞭解gulp可以翻下我之前的部落格，或者直接gulp的中文站

‘use strict‘;var gulp = require(‘gulp‘),    del = require(‘del‘),    plumber = require(‘gulp-plumber‘),    rename = require(‘gulp-rename‘),    traceur = require(‘gulp-traceur‘);var connect = require(‘gulp-connect‘),    open = require(‘gulp-open‘),    port = 3456;var PATHS = {    src: {        js: ‘src/**/*.js‘,        html: ‘src/**/*.html‘    },    lib: [        ‘node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js‘,        ‘node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js‘,        ‘node_modules/systemjs/lib/extension-register.js‘,        ‘node_modules/angular2/node_modules/zone.js/dist/zone.js‘,        ‘node_modules/angular2/node_modules/zone.js/dist/long-stack-trace-zone.js‘,        ‘node_modules/reflect-metadata/Reflect.js‘,        ‘node_modules/reflect-metadata/Reflect.js.map‘,    ]};gulp.task(‘watch‘, function() {    gulp.watch(PATHS.src.js, [‘js‘]);    gulp.watch(PATHS.src.html, [‘html‘]);});gulp.task(‘js‘, function() {    return gulp.src(PATHS.src.js)        .pipe(rename({            extname: ‘‘        }))         .pipe(plumber())        .pipe(traceur({            modules: ‘instantiate‘,            moduleName: true,            annotations: true,            types: true,            memberVariables: true        }))        .pipe(rename({            extname: ‘.js‘        }))         .pipe(gulp.dest(‘dist‘));});gulp.task(‘html‘, function() {    return gulp.src(PATHS.src.html)        .pipe(gulp.dest(‘dist‘));});gulp.task(‘angular2‘, function() {    var buildConfig = {        paths: {            "angular2/*": "node_modules/angular2/es6/prod/*.es6",            "rx": "node_modules/angular2/node_modules/rx/dist/rx.js"        },        meta: {            ‘rx‘: {                format: ‘cjs‘            }        }    };    var Builder = require(‘systemjs-builder‘);    var builder = new Builder(buildConfig);    return builder.build(‘angular2/angular2‘, ‘dist/lib/angular2.js‘, {});});gulp.task(‘libs‘, [‘angular2‘], function() {    var size = require(‘gulp-size‘);    return gulp.src(PATHS.lib)        .pipe(size({            showFiles: true,            gzip: true        }))        .pipe(gulp.dest(‘dist/lib‘));});gulp.task(‘connect‘, function() {    connect.server({        root: __dirname + ‘/dist‘,        port: port,        livereload: true    });});gulp.task(‘open‘, function() {    var options = {        url: ‘http://localhost:‘ + port,    };    gulp.src(‘./index.html‘)        .pipe(open(‘‘, options));});gulp.task(‘build‘, [‘js‘, ‘html‘])gulp.task(‘default‘, [‘build‘, ‘libs‘]);gulp.task(‘serve‘, [‘connect‘, ‘open‘]);gulp.task(‘clean‘, function(done) {    del([‘dist‘], done);});

5.tyconfig.json檔案：定義了typescript編譯器如何從項目源檔案產生javascript代碼

{  "compilerOptions": {    "target": "es5",    "module": "commonjs",    "moduleResolution": "node",    "sourceMap": true,    "emitDecoratorMetadata": true,    "experimentalDecorators": true,    "removeComments": false,    "noImplicitAny": false  }}

6.typings.json檔案：為那些 TypeScript 編譯器無法識別的庫提供了額外的定義檔案。

{  "globalDependencies": {    "core-js": "registry:dt/core-js#0.0.0+20160725163759",    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",    "node": "registry:dt/node#6.0.0+20160909174046"  }}

7.systemjs.config.js檔案：為模組載入器提供了該到哪裡尋找應用模組的資訊，並註冊了所有必備的依賴包。它還包括文檔中後面的例子需要用到的包。

 

8.安裝package.json中列出的依賴包，這裡需要使用nodejs來定義需要使用的angular2版本和所有第三方依賴的版本

　　在node命令列中輸入 npm install
　　如果運行結束沒有產生typings目錄，則手動安裝 npm run typings install

 

9.定義該應用的宿首頁面，根目錄下建立index.html

 

10.編譯並運行應用程式   npm start

 

你會發現瀏覽器啟動了程式，並且編譯了app/app.component.ts檔案並輸出所有相應的ts檔案為js檔案，在你編輯檔案儲存後瀏覽器會自動重新整理並會提示相應的錯誤

 

angular2環境搭建