您的位置：首页 > Web前端 > AngularJS

Angular 2 开发环境搭建

2016-01-29 14:44 567 查看

目录结构如下

文件说明

gulp.config.js

module.exports = function() {
var config = {
allTs: './app/**/*.ts',
tsOutputPath: './app/'
};

return config;
}

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var tsProject = tsc.createProject('tsconfig.json');
var config = require('./gulp.config')();

// var browserSync = require('browser-sync');
var connect = require('gulp-connect');
var superstatic = require('superstatic');

gulp.task('ts-lint', function() {
return gulp.src(config.allTs)
.pipe(tslint())
.pipe(tslint.report('prose', {
emitError: false
}));
})

gulp.task('compile-ts', function() {
var sourceTsFiles = [
config.allTs
];

var tsResult = gulp
.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));

return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.tsOutputPath));
});

gulp.task('server',function(){
connect.server({
basename:[__dirname],
port:3000,
livereload:true
});
});

gulp.task('reload',function(){
gulp.src('./*.html')
.pipe(connect.reload());
});

gulp.task('default', ['server'],function(){
gulp.watch([config.allTs], ['ts-lint', 'compile-ts']);
gulp.watch(['./app/*.map'],['reload']);
});

index.html

<html>
<head>
<base href="/">
<title>Angular 2 - ToDo App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
"angular2-jwt": "node_modules/angular2-jwt/angular2-jwt",
"angular2": "node_modules/angular2",
"rxjs": "node_modules/rxjs"
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<hello-world>Loading...</hello-world>
</body>
</html>

package.json

{
"name": "asdad",
"version": "0.0.1",
"description": "asd",
"main": "ad",
"scripts": {
"test": "ad"
},
"repository": {
"type": "git",
"url": "asd"
},
"keywords": [
"aad"
],
"author": "ada",
"license": "MIT",
"devDependencies": {
"angular2": "2.0.0-beta.0",
"angular2-jwt": "^0.1.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"gulp": "^3.9.0",
"gulp-connect": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^4.3.1",
"gulp-typescript": "^2.10.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"superstatic": "^4.0.1",
"systemjs": "0.19.6",
"zone.js": "0.5.10"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

tslint.json

{
"rules": {
"class-name": true,
"curly": true,
"eofline": false,
"forin": true,
"indent": [true, 4],
"label-position": true,
"label-undefined": true,
"max-line-length": [true, 140],
"no-arg": true,
"no-bitwise": true,
"no-console": [true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-imports": true,
"no-string-literal": false,
"no-trailing-comma": true,
"no-trailing-whitespace": true,
"no-unused-variable": false,
"no-unreachable": true,
"no-use-before-declare": true,
"one-line": [true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"quotemark": [true, "single"],
"radix": true,
"semicolon": true,
"triple-equals": [true, "allow-null-check"],
"variable-name": false,
"whitespace": [true,
"check-branch",
"check-decl",
"check-operator",
"check-separator"
]
}
}

执行

1、npm install

2、gulp

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航