Typescript學習之基于gulp+browserify+browser-sync等搭建自動化開發環境

這裡就不介紹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:  // 指定通路伺服器的端口号
    });
})

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"
  }
}