使用webpack/gulp构建TypeScript项目的方法示例


Posted in Javascript onDecember 18, 2019

总体来看,TypeScript项目构建主要分两步:

  1. 将ts 项目整体转换为js项目
  2. 按常规套路,对该 js 项目进行打包构建

构建过程中,对 ts 文件的转换不再使用命令行方式,所以 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

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: 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 文件。

使用 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 构建。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
理解AngularJs指令
Dec 10 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
小程序简单两栏瀑布流效果的实现
Dec 18 #Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 #Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 #Javascript
使用JS来动态操作css的几种方法
Dec 18 #Javascript
基于ts的动态接口数据配置的详解
Dec 18 #Javascript
H5实现手机拍照和选择上传功能
Dec 18 #Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
处理单名多值表单的详解
2013/06/08 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
Bootstrap每天必学之日期控制
2016/03/07 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
python实战教程之自动扫雷
2018/07/13 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
Internet体系结构
2014/12/21 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
综合办公室主任职责
2013/12/16 职场文书
党员志愿者活动方案
2014/08/28 职场文书
单位作风建设自查报告
2014/10/23 职场文书
优秀英文求职信范文
2015/03/19 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技