Typescript结合gulp开发

最新推荐文章于 2024-05-17 09:37:38 发布

水痕01

最新推荐文章于 2024-05-17 09:37:38 发布

阅读量2.5k

点赞数 1

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/kuangshp128/article/details/70045831

版权

typescript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

全局安装npm install tsc -g
全局安装npm install -g gulp-cli
创建一个项目–>里面创建src和dist文件
npm init创建一个package.json
package.json文件

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^14.3.0",
    "gulp": "^3.9.1",
    "gulp-typescript": "^3.1.6",
    "gulp-util": "^3.0.8",
    "tsify": "^3.0.1",
    "typescript": "^2.2.2",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.9.0"
  }
}

在src文件中创建ts文件

src/main.ts
import { sayHello } from "./greet";

function showHello(divName: string, name: string) {
    const elt = document.getElementById(divName);
    elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");

src/greet.ts
export function sayHello(name: string) {
    return `Hello from ${name}`;
}

创建一个tsconfig.json文件,就是把自己写的ts文件追加上去

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "src/main.ts",
    "src/greet.ts"
  ]
}

新建一个gulpfile.js文件

'use strict';
var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var paths = {
    pages: ['src/*.html']
};
gulp.task("copy-html", function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"));
});
gulp.task("default", ["copy-html"], function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .bundle()
        .pipe(source('bundle.js')) //生产出bundle.js
        .pipe(gulp.dest("dist")); //存放在dist文件夹下面
});

在src文件夹里面创建一个index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello World!</title>
</head>
<body>
<p id="greeting">Loading ...</p>
<script src="bundle.js"></script>
</body>
</html>

水痕01

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Typescript结合gulp开发

全局安装npm install tsc -g全局安装npm install -g gulp-cli创建一个项目–>里面创建src和dist文件npm init创建一个package.jsonpackage.json文件{ "name": "demo01", "version": "1.0.0", "description": "", "main": "index.js",
复制链接

扫一扫