这里就不介绍TypeScript到底是什么了,TypeScript是JavaScript的一个超集,但是我们在使用或者是学习的过程中,我们需要将写好的.ts文件编译成.js文件才可以使用,所以给一开始的学习过程增加了很多麻烦,所以也是我为什么要去搭建一个自动化的开发环境,这样可以节省很多时间在一些机械工作上。Typescript官网给出了一个官方的教程搭建环境,但还不足以满足我的需求,于是我需要自己在官网的基础上进行增加。
项目上传到了我的GitHub上项目GitHub地址
第一次进行流程构建,不好的地方希望大佬斧正。
首先我们确定一下我们的需求,那些地方需要自动化
一.确立需求
1.首先我们需要将.ts文件自动编译成.js文件
2.我们需要监测.ts文件的变化,如果发生变化,我们需要重新编译
3.在文件发生变化的时候,我们需要进行浏览器重载,来获取最新的文件
二.技术插件选取
这里选择了gulp作为整体的一个流程控制工具,browserify作为一个打包工具,browser-sync作为本地服务搭建
当然还有了一些其他的插件接下来的代码一一介绍
目录结构
,
直接上最后的代码
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');//进行格式解析,解析成vinyl
var tsify = require('tsify');//Browserify的一个插件访问typescript编译器
var sourcemaps = require('gulp-sourcemaps');//和sourcemaps有关
var buffer = require('vinyl-buffer');//和sourcemaps有关
var watchify = require("watchify");//browserify的插件,负责监听.ts文件变化
var gutil = require("gulp-util");//打印log
var browserSync = require('browser-sync');//开启本地服务
var reload = browserSync.reload; //重载
var babelpolyfill = require("babel-plugin-transform-runtime"); //babel有关的,当时用到ES7或ES6 generator
//等一些特性的时候需要,可以在babel官网了解下
//配置一些项目输入输出目录
var paths = {
pages: ['src/*.html'],
};
//配置watchify
var watchedBrowserify = watchify(browserify({
basedir: '.',
debug: true,
entries: ['src/main.ts'],
cache: {},
packageCache: {}
}).plugin(tsify));
//建立task
gulp.task('copyHtml', function () {
return copyHtml();
});
//将src下的html复制到dist目录下
function copyHtml() {
return gulp.src(paths.pages)
.pipe(gulp.dest('dist'))
.pipe(reload({stream:true}));//重载
}
//将js文件模块打包到一起
function bundle() {
return watchedBrowserify
.transform('babelify', {//使用babel
presets: ['es2015'], 预设是es2015也就是我们说的ES6
extensions: ['.ts']//需要手动识别一下.ts文件,babel默认不识别
})
.bundle()//必须的一个,向update发出emit事件,否则下面的update是没用的,github上有介绍
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'))
.pipe(reload({stream:true}));//重载
}
//开启服务器,我这里开的是静态服务器
gulp.task('serve', function() {
browserSync.init({
server:{
baseDir:'./', // 设置服务器的根目录
index:'dist/index.html' // 指定默认打开的文件
},
port:8050 // 指定访问服务器的端口号
});
})
gulp.task('default', ['copyHtml','serve'], bundle);//在终端输入gulp默认执行的任务
gulp.watch(paths.pages,['copyHtml'])//观察html文件变化
watchedBrowserify.on("update", bundle);//监听.ts变化
watchedBrowserify.on("log", gutil.log);//当文件更改是,打印日志
关于这里使用babel,这里说一下,为什么用了ts为什么需要再用babel,因为有一些es6或更高的版本,ts是无法识别的,所以我们需要将TypeScript目标设置为ES2015。 Babel稍后会从TypeScript生成的ES2015代码中生成ES5,至于上面引入的
var babelpolyfill = require(“babel-plugin-transform-runtime”); //其实不应该在这里引入,但现在暂时在这里引入,一些新的特性,我们需要引入额外的包才可以使用,例如es6的generator
关于babel我们一共需要引入
babelify //babel在browserify工具下的插件包
babel-preset-es2015 //es2015版本预设
babel-core //babel核心包
babel-plugin-transform-runtime //额外的包
配置文件如下
tsconfig.json
{
"compilerOptions": {
"module": "commonjs", //模块规则
"target": "es2015", //目标版本
"sourceMap": true //是否包含sourceMap
},
"exclude": [
"node_modules" //忽略文件
],
"files": [
"src/main.ts" //编译文件
]
}
.babelrc别忘了前面的.
{
"presets": ["es2015"],
"plugins": [[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}
]]
}
package.json
{
"name": "TsTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babelify": "^8.0.0",
"browser-sync": "^2.23.6",
"browserify": "^16.0.0",
"gulp": "^3.9.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-typescript": "^4.0.1",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"tsify": "^3.0.4",
"typescript": "^2.7.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"watchify": "^3.10.0"
}
}