使用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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
js表数据排序 sort table data
Feb 18 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
小程序简单两栏瀑布流效果的实现
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
Syphon 使用方法
2021/03/03 冲泡冲煮
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
客服主管岗位职责
2013/12/13 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
高三语文复习计划
2015/01/19 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
建党伟业的观后感
2015/06/01 职场文书