本文详细介绍TypeScript项目的两种主流构建方案。首先通过tsc初始化tsconfig.json，随后分别演示使用Webpack配合ts-loader，以及使用Gulp结合browserify和tsify进行打包的具体步骤。文章包含完整的配置文件代码、命令行操作及npm脚本整合方法，帮助开发者快速掌握前端工程化构建流程。
TypeScript构建流程概述
总体而言，TypeScript项目的构建流程主要包含两个核心阶段：
- 第一步是将整个TypeScript项目编译转换为JavaScript项目；
- 第二步则是按照常规流程，对生成的JavaScript项目进行打包构建。
在构建过程中，TypeScript文件的转换不再依赖命令行直接执行，因此tsc的相关配置参数需要写入tsconfig.json文件中进行管理。
首先需要初始化tsconfig.json配置文件。
tsc --init执行初始化后，项目目录下会生成一个内容详尽且冗长的tsconfig.json文件。此时无需对该文件进行额外修改，保持默认状态即可。
{
"compilerOptions": {
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
// "lib": [], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, ...
}
}
使用Webpack进行构建
接下来介绍如何使用Webpack进行构建。
首先需要在系统中全局安装Webpack及其命令行工具。
npm i -g webpack webpack-cli随后，在项目本地环境中安装ts-loader和typescript依赖包。
npm i -D ts-loader typescript
接着，创建webpack.config.js作为Webpack的配置文件。
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: 1c028195d238a71fe1c7
Version: webpack 4.41.3
Time: 726ms
Built at: 2019/12/17 下午2:56:12
Asset Size Chunks Chunk Names
index.js 1.61 KiB 0 [emitted] main
Entrypoint 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文件。
使用Gulp进行构建
另一种构建方式是使用Gulp。
首先全局安装Gulp工具。
npm i -g gulp然后在项目本地安装必要的依赖库。
- 包括gulp本身；
- browserify打包工具；
- tsify插件；
- 以及vinyl-source-stream流处理库。
npm i -D gulp browserify tsify vinyl-source-stream随后，创建gulpfile.js文件以定义Gulp任务。
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构建指令
为了简化操作，可以配置npm脚本指令。
我们将上述两种构建方式整合到项目的package.json指令中：
"scripts": {
"test": "ts-node test",
"build-webpack": "webpack",
"build-gulp": "gulp",
"build": "npm run build-webpack"
}
这里分别针对Webpack和Gulp添加了独立的构建指令，并将默认的build指令设置为调用Webpack进行构建。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。