使用webpack/gulp构建TypeScript项目的方法示例
总体来看，TypeScript项目构建主要分两步：
- 将ts项目整体转换为js项目
- 按常规套路，对该 js项目进行打包构建
构建过程中，对 ts文件的转换不再使用命令行方式，所以 tsc的配置参数，需要通过 tsconfig.json文件设置。
初始化 tsconfig.json
tsc--init
之后，我们会在项目目录中得到一个完整冗长的 tsconfig.json配置文件。这个文件暂且不必改动。
{
"compilerOptions":{
/*BasicOptions*/
//"incremental":true,/*Enableincrementalcompilation*/
"target":"es5",/*SpecifyECMAScripttargetversion:'ES3'(default),'ES5','ES2015','ES2016','ES2017','ES2018','ES2019'or'ESNEXT'.*/
"module":"commonjs",/*Specifymodulecodegeneration:'none','commonjs','amd','system','umd','es2015',or'ESNext'.*/
//"lib":[],/*Specifylibraryfilestobeincludedinthecompilation.*/
//"allowJs":true,/*Allowjavascriptfilestobecompiled.*/
//"checkJs":true,...
}
}
使用webpack构建
全局安装 webpack
npmi-gwebpackwebpack-cli
本地安装 ts-loader和 typescript
npmi-Dts-loadertypescript
创建 webpack.config.js
constpath=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:webpack4.41.3
Time:726ms
Builtat:2019/12/17下午2:56:12
AssetSizeChunksChunkNames
index.js1.61KiB0[emitted]main
Entrypointmain=index.js
[0]./a.ts147bytes{0}[built]
[1]./b.ts147bytes{0}[built]
[2]./index.ts318bytes{0}[built]
[3]./c.ts378bytes{0}[built]
在dist中，生成了一个转换且合并完成的webpack-bundle.js文件。
使用 gule构建
全局安装 gule
npmi-ggulp
本地安装
- gulp
- browserify
- tsify
- vinyl-source-stream
npmi-Dgulpbrowserifytsifyvinyl-source-stream
创建 gulpfile.js文件
constgulp=require('gulp')
consttsify=require('tsify')
constbrowserify=require('browserify')
constsource=require('vinyl-source-stream')
gulp.task('default',()=>{
returnbrowserify({
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]Usinggulpfile~/ts-learn/bundle/gulpfile.js [15:37:30]Starting'default'... [15:37:32]Finished'default'after1.4s
在dist中，生成了一个转换且合并完成的gulp-bundle.js文件。
配置npm指令
我们将这两个指令整合到项目指令中：
"scripts":{
"test":"ts-nodetest",
"build-webpack":"webpack",
"build-gulp":"gulp",
"build":"npmrunbuild-webpack"
}
这里分别针对webpack/gulp添加了构建指令，并将build指令设置为默认使用webpack构建。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。