总体来看，TypeScript项目构建主要分两步：

将ts 项目整体转换为js项目

按常规套路，对该js 项目进行打包构建

构建过程中，对ts 文件的转换不再使用命令行方式，所以tsc 的配置参数，需要通过tsconfig.json 文件设置。

初始化tsconfig.json

tsc --init

之后，我们会在项目目录中得到一个完整冗长的tsconfig.json 配置文件。这个文件暂且不必改动。

{ "compilerOptions": { // "incremental": true, "target": "es5", "module": "commonjs", // "lib": [], // "allowJs": true, // "checkJs": true, ... }}

使用webpack 构建

全局安装webpack

npm i -g webpack webpack-cli

本地安装ts-loader 和typescript

npm i -D ts-loader typescript

创建webpack.config.js

const path = require('path')module.exports = { mode: 'production', entry: { main: './index.ts' }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ } ] }, output: { filename: 'webpack-bundle.js', path: path.resolve(__dirname, 'dist'), libraryTarget: 'commonjs', }, resolve: { extensions: ['.ts'] }}

运行webpack

经过上述配置之后，在控制台项目路径内，中直接运行webpack 。

% webpack Hash: 1c028195d238a71fe1c7Version: webpack 4.41.3Time: 726msBuilt at: 2019/12/17 下午2:56:12 Asset Size Chunks Chunk Namesindex.js 1.61 KiB 0 [emitted] mainEntrypoint main = index.js[0] ./a.ts 147 bytes {0} [built][1] ./b.ts 147 bytes {0} [built][2] ./index.ts 318 bytes {0} [built][3] ./c.ts 378 bytes {0} [built]

在dist 中，生成了一个转换且合并完成的webpack-bundle.js 文件。

使用gule 构建

全局安装gule

npm i -g gulp

本地安装

• gulp
• browserify
• tsify
• vinyl-source-stream

npm i -D gulp browserify tsify vinyl-source-stream

创建gulpfile.js 文件

const gulp = require('gulp')const tsify = require('tsify')const browserify = require('browserify')const source = require('vinyl-source-stream')gulp.task('default', () => { return browserify({ basedir: '.', debug: true, entries: ['index.ts'], cache: {}, packageCache: {} }).plugin(tsify).bundle() .pipe(source('gulp-bundle.js')) .pipe(gulp.dest('dist'))})

运行gulp

经过上述配置之后，在控制台项目路径内，中直接运行gulp 。

% gulp[15:37:30] Using gulpfile ~/ts-learn/bundle/gulpfile.js[15:37:30] Starting 'default'...[15:37:32] Finished 'default' after 1.4 s

在dist 中，生成了一个转换且合并完成的gulp-bundle.js 文件。

配置npm 指令

我们将这两个指令整合到项目指令中：

"scripts": { "test": "ts-node test", "build-webpack": "webpack", "build-gulp": "gulp", "build": "npm run build-webpack"}

这里分别针对webpack /gulp 添加了构建指令，并将build 指令设置为默认使用webpack 构建。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。