使用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 相关文章推荐
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
留言板翻页的实现详解
2006/10/09 PHP
利用 window_onload 实现select默认选择
2006/10/09 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
js获取微信版本号的方法
2015/05/12 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
4s店活动策划方案
2014/08/25 职场文书
毕业欢送会致辞
2015/07/29 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书