angular2環境搭建

時間 2019-12-01

標籤 angular2 angular 環境搭建欄目 AngularJS 简体版

原文原文鏈接

Angular2.x與Angular1.x徹底不一樣，Angular2.x是不兼容Angular1.x的，所在在框架的構造上，它們是徹底不一樣的。在Angular2.x中，由於其是基於ES6來開發的，因此會有不少第三方依賴。因爲不少瀏覽器還不支持ES6，因此Angular2引入了不少polyfill或者shim, 致使咱們引入了第三方依賴。javascript

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

html

1.安裝 node v6.x.x npm 3.x.x gulp 有興趣的能夠安裝typescriptjava

gulp的安裝 npm install -g 全局安裝環境node

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

2.新建項目文件夾（英文）es6

3.在github上clone相關文件，並放入相關配置項
　　地址：https://github.com/Jasonwang911/angular2github

4.package.json文件：用來標記項目所需的npm依賴包typescript

這是一個gulp的工做流，在gulp中咱們部署的函數都是由gulp.task來執行的，這個文件的主要作的工做是　　　　npm

1.對angular2源碼進行轉換，將es6代碼轉換爲es5代碼，而後合併成angular2.js，放入dest/lib目錄
2.將angular2的第三方依賴放入dest/lib目錄
3.自動監測用戶寫的代碼，當文件發生修改時，自動將其編譯爲es5代碼，而後放入dest目錄
4.開啓一個本地服務器，讓用戶訪問http://localhost:3456/ 就能夠看到頁面效果
5.刪除dest目錄json

若是想了解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"
  }
}