typescript 编辑环境部署

1、typescript 是 JavaScript的一个超集。

2、typescript 编译 成 JavaScript的开发环境:

  方法1、gulp 编译:https://www.jianshu.com/p/6f9219686992  (typescript包作为一个gulp创建,webpack应该也是可以的)

  方法2、typescript 编译 工具: https://www.jianshu.com/p/c4e639296b98  (typescript包作为一个工具)

3、typescript 在node 上自己运行:使用 ts-node 包 【里面 编译后 直接  运行 了】

4、使用gulp实现typescript得自动化编译【这里就讲下使用gulp来编译ts】:https://www.jianshu.com/p/6f9219686992

  a、安装 gulp包。(全局gulp已经安装过了)

npm install gulp gulp-typescript typescript --save    // 这里要注意gulp版本的问题,直接安装是最新的包,结果运行gulp命令时,报错。重新安装换了一个版本就没有问题了。

  b、创建 文件:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": false,
    "sourceMap": false,
    "outDir": "./js",
    "noImplicitReturns": false,
    "allowUnreachableCode": false
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./ts/**/*"
  ]
}

  c、创建 gulpfile.js 文件(gulp任务文件):

var gulp = require('gulp');
var ts = require('gulp-typescript')

var tsProject = ts.createProject('./tsconfig.json')

gulp.task('tsc', () => {
  console.log(tsProject.config.include);
  gulp.src(tsProject.config.include)
    .pipe(tsProject())
    .pipe(gulp.dest(tsProject.config.compilerOptions.outDir));
})

gulp.task('default',['tsc'],() => {
  gulp.watch('./ts/**/*.ts',['tsc']);
})

 


tsconfig.json配置:

 

 

 

 

 

 

 

 

相关文章: