Typescript学习之基于gulp+browserify+browser-sync等搭建自动化开发环境

一时失言乱红尘 2022-05-31 08:23 221阅读 0赞

这里就不介绍TypeScript到底是什么了，TypeScript是JavaScript的一个超集，但是我们在使用或者是学习的过程中，我们需要将写好的.ts文件编译成.js文件才可以使用，所以给一开始的学习过程增加了很多麻烦，所以也是我为什么要去搭建一个自动化的开发环境，这样可以节省很多时间在一些机械工作上。Typescript官网给出了一个官方的教程搭建环境，但还不足以满足我的需求，于是我需要自己在官网的基础上进行增加。  
项目上传到了我的GitHub上[项目GitHub地址][GitHub]  
第一次进行流程构建，不好的地方希望大佬斧正。

首先我们确定一下我们的需求，那些地方需要自动化

一.确立需求  
1.首先我们需要将.ts文件自动编译成.js文件  
2.我们需要监测.ts文件的变化，如果发生变化，我们需要重新编译  
3.在文件发生变化的时候，我们需要进行浏览器重载，来获取最新的文件  
二.技术插件选取  
这里选择了gulp作为整体的一个流程控制工具，browserify作为一个打包工具，browser-sync作为本地服务搭建  
当然还有了一些其他的插件接下来的代码一一介绍

**目录结构**

![废话不说][70]，

**直接上最后的代码**

关于这里使用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" } }

[GitHub]: https://github.com/qifengyugood/TsTest
[70]: /images/20220531/59e1cea52d0b44ee8f0e7d3ba74dc887.png