全局装置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/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 saywww.sangpi.comHello(name: string) {
return `Hello from ${name}`;"compilerOptions": {
"module": "commonjs","target": "es5","noImplicitAny": true,"sourceMap": true},
"exclude": [
"node_modules"],
"files": [
"src/main.ts","src/greet.ts"'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文件夹上面<!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>