Typescript 结合 gulp 开发:全局安装 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.tsimport {
- sayHello
- }
- from "./greet";
- function showHello(divName: string, name: string) {
- const elt = document.getElementById(divName);
- elt.innerText = sayHello(name);
- }
- showHello("greeting", "TypeScript");
- src / greet.tsexport
- 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 文件。
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/04-12/20354279.html