首页 > 代码库 > angular2环境搭建

angular2环境搭建

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环境搭建