搭建ts运行环境Playground

功能：在ts 代码编写保存后就能查看到编译后的ts代码以及编译信息和运行结果，因此我们需要一个工具，能够监控源代码文件的变化，并在监控到变化之后自动启动编译过程并在编译成功之后执行编译的JS脚本。

需要的工具

gulp 构建工具
ts-node
1. gulp 的配置文件 gulpfile.ts 本身是可以使用ts 来写的，如果使用ts 那么需要ts-node的支持
gulp-typescript
1. 为了能在gulp 中编译ts 脚本，需要gulp-typescript 插件
child_process
1. 为了能在gulp 中执行脚本，需要用到node 中的 child_process 模块来开启进程
watch()
1. gulp 提供的，用来监听文件的变化，并触发编译和运行任务。

创建项目并安装依赖

创建目录 mkdir ts-playground
初始化 npm init -y
安装以来 npm i -D typescript ts-node gulp gulp-typescript
初始化typescript npx tsc --init
安装gulp类型检查 npm i -D @types/gulp @types/gulp-typescript

编写 gulpfile.ts 配置文件

编写compile 方法

compile 方法，将指定目录下ts 文件编译后输出到指定目录下。

import {  src, dest, watch ,series } from "gulp";
import ts from "gulp-typescript";


const tsProject = ts.createProject("tsconfig.json");

function compile(){
    // 使用src 引入源代码
    const tsResult = src("src/**/*.ts")
    .pipe(tsProject());

    // 将编译的结果输出到 dist 目录
    return tsResult.js.pipe(dest("./dist"));
}

// 导出任务
export { compile };

执行任务： npx gulp compile 表示执行创建的compile任务。

image.png

编写 run 方法

执行编译后的js 脚本文件

import { src, dest, watch, series } from "gulp";
import ts from "gulp-typescript";
import { exec } from "child_process";

const tsProject = ts.createProject("tsconfig.json");

function compile() {
    // 使用src 引入源代码
    const tsResult = src("src/**/*.ts")
        .pipe(tsProject());

    // 将编译的结果输出到 dist 目录
    return tsResult.js.pipe(dest("./dist"));
}


/**
 * 执行脚本
 */
function run(): Promise<any> {


    return new Promise(resolve => {
        // stdout 标准输入 ， stderr 标准错误
        exec("node ./dist/", (err, stdout, stderr) => {
            console.log(stdout);

            if (stderr) {
                console.log(stderr);

            }

            resolve(err);

        })
    })


}

export { compile };

//使用 series 将两个任务连接起来，先运行 compile 将文件编译成js 放到dist 目录下，
//在执行 run ， 运行dist 目录下的js 脚本
export default series(compile , run);

执行命令 npx gulp

image.png

编写watch 方法

监听 ts 文件的变化，然后做出操作。

import { src, dest, watch, series } from "gulp";
import ts from "gulp-typescript";
import { exec } from "child_process";

const tsProject = ts.createProject("tsconfig.json");

function compile() {
    // 使用src 引入源代码
    const tsResult = src("src/**/*.ts")
        .pipe(tsProject());

    // 将编译的结果输出到 dist 目录
    return tsResult.js.pipe(dest("./dist"));
}


/**
 * 执行脚本
 */
function run(): Promise<any> {


    return new Promise(resolve => {
        // stdout 标准输入 ， stderr 标准错误
        exec("node ./dist/", (err, stdout, stderr) => {
            console.log(stdout);

            if (stderr) {
                console.log(stderr);

            }

            resolve(err);

        })
    })


}

/**
 * 监听
 */
function watchTs(){
    // 定义监听 src 目录下的 ts 文件，如果有变化就执行 compile 和 run 函数
    watch("src/**/*.ts" ,  series(compile , run));
}

export { compile , watchTs as watch };


// 使用 series 将两个任务连接起来，先运行 compile 将文件编译成js 放到dist 目录下，在执行 run ， 运行dist 目录下的js 脚本
export default series(compile , run);

执行命令 npx gulp watch

image.png

这是你会发现，当你修改左边的index.ts 文件后保存，右边的index.js 文件也会跟着修改。并且在控制台执行了 index.js

package.json 自定义命令

为了方便，可以编写一些自定义命令

{
  "name": "ts-playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "gulp watch",
    "build": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/gulp": "^4.0.9",
    "@types/gulp-typescript": "^2.13.0",
    "gulp": "^4.0.2",
    "gulp-typescript": "^6.0.0-alpha.1",
    "ts-node": "^10.8.2",
    "typescript": "^4.7.4"
  }
}

博客地址：http://kafeim.cn/