TypeScript学习笔记（二）之Browserify Gulp

最新推荐文章于 2024-08-16 09:37:27 发布

翎羽飘

最新推荐文章于 2024-08-16 09:37:27 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： TypeScript

本文链接：https://blog.csdn.net/u014032819/article/details/77652709

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、使用Browserify将工程移入浏览器环境

1）安装Browserify，tsify（Browserify的插件，能够访问TypeScript编译器），vinyl-source-stream（将Browserify的输出文件适配成gulp能够解析的格式）

npm install --save-dev browserify tsify vinyl-source-stream

2）在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>

3）修改main.ts文件

import {sayHello} from "./greet";


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


showHello("greeting", "TypeScript");

4）修改gulpfile

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var paths = {
	pages: ['src/*.html']
};
//增加copy-html并将它作为default的依赖项，当default执行时，copy-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: {}
		})
	//使用tsify插件调用Browserify
		.plugin(tsify)
		.bundle()
		//调用bundle后，使用source把输出文件命名为bundle.js
		.pipe(source('bundle.js'))
		.pipe(gulp.dest("dist"));
});

运行gulp，打开dist.index.html即可。

2、Watchify：启动Gulp并保持运行状态，保存文件时自动编译

Babel：编译器，将ES6以上版本转化为低版本

Uglify压缩代码

npm install --save-dev watchify gulp-util

修改gulpfile.js

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var watchify = require("watchify");
var tsify = require("tsify");
var gutil = require("gulp-util");
var paths = {
	pages: ['src/*.html']
};

var watchedBrowserify = watchify(browserify({
	basedir: '.',
	debug: true,
	entries: ['src/main.ts'],
	cache: {},
	packageCache: {}
}).plugin(tsify));

//增加copy-html并将它作为default的依赖项，当default执行时，copy-html会被首先执行
gulp.task("copy-html", function() {
	return gulp.src(paths.pages)
		.pipe(gulp.dest("dist"));
});

function bundle() {
	return watchedBrowserify
		.bundle()
		.pipe(source('bundle.js'))
		.pipe(gulp.dest("dist"));
}

gulp.task("default", ["copy-html"], bundle);
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);

/*gulp.task("default", ["copy-html"], function() {
	return browserify({
			basedir: '.',
			debug: true,
			entries: ['src/main.ts'],
			cache: {},
			packageCache: {}
		})
	//使用tsify插件调用Browserify
		.plugin(tsify)
		.bundle()
		//调用bundle后，使用source把输出文件命名为bundle.js
		.pipe(source('bundle.js'))
		.pipe(gulp.dest("dist"));
});*/