文档章节

TypeScript+Webpack开发环境记录

曾建凯
 曾建凯
发布于 2016/11/09 10:10
字数 549
阅读 770
收藏 12

经历过大规模的JS(ES6)的开发,深刻的体验到,JS语言本身的诸多不便利。遂决定转用TypeScript。

本文只是记录一下,当前时间,配置本地webpack、ts、ts-loader开发环境时,需要调整的一些问题。

当前类库版本号:

webpack: 1.13.3

webpack-dev-server: 1.16.2

typescript: 2.0.6

ts-loader: 1.0.0

本地搭建TypeScript+Webpack开发环境的基础准备

这里直接以ts 2.0为例。

项目初始化所需要的基础类库: 

npm install --save-dev webpack webpack-dev-server typescript ts-loader 
npm install --save-dev @types/node
npm install --save-dev copy-webpack-plugin extract-text-webpack-plugin html-webpack-plugin

第三行部分,可选择性的添加。

webpack.config.js文件的配置:

const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const packageInfo = require('./package.json');

const outputPath = __dirname + '/output/' + packageInfo.version;
const releasePath = __dirname + '/output/release/';

module.exports = {
	entry: './src/any.ts',
	output: {
		filename: 'any.js'
	},
	resolve: {
		extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
	},
	module: {
		loaders: [
			{test: /\.tsx?$/, loader: 'ts-loader'}
		]
	},
	plugins: [
		new webpack.OldWatchingPlugin(),
		new HtmlWebpackPlugin({
			title: 'any-library - ver ' + packageInfo.version
		}),
		//new CopyWebpackPlugin([
		//	// 打包出release
		//	{
		//		from: outputPath,
		//		to: releasePath,
		//		toType: 'dir'
		//	}
		//])
	]
};

webpack --hot在windows失效的问题

随着webpack版本号推进(依赖类库的更新),在windows环境上面要正常使用webpack的--hot(包括--watch)功能,需要使用 webpack.OldWatchingPlugin ,这个东西随附在当前版本的webpack的核心类库包内,无需额外的npm插件。

ts-loader在--watch模式下报mtimes错误的问题

诸多typescript的webpack插件,比较了一下,ts-loader比较符合需求(也许有更好的选择,欢迎提出批评)。

ts-loader的watch模式,因为webpack版本更新,会报错。实际上ts-loader的github库已经提出了解决方案,但貌似没有推送到1.0.0的分支上,所以当前版本仍会报这个错误(错误信息我就不截图了)。

修改的办法,修改项目目录下的 /node_modules/ts-loader/dist/watch-run.js 文件,第 9 行:

var mtimes = watching.compiler.watchFileSystem.watcher.mtimes;

修改为:

var mtimes = watching.compiler.fileTimestamps ||
   watching.compiler.watchFileSystem.watcher.mtimes;

这样,即可正常的使用ts-loader和webpack的--hot(--watch)模式了。

© 著作权归作者所有

曾建凯

曾建凯

粉丝 337
博文 66
码字总数 104794
作品 0
广州
技术主管
私信 提问
TypeScript+webpack开发js库

由于近期需要开发一个比较复杂的组件,所以决定采用typescript进行开发。之前有用过typescript进行开发,用打包后,再用脚本将所有js进行合并,然后再用压缩js,但是最终报错了,原因就是合并...

陨石坠灭
08/23
0
0
Windows Phone 7 开发环境初体验

今天下载了Windows Phone 7的开发环境,一起分享给大家。 我下载的是一个ISO文件,下载地址是:http://go.microsoft.com/fwlink/?LinkId=201927 先说说我的机器配置情况吧,Win 7系统,已经装...

鉴客
2011/09/19
1K
3
java极速开发框架--JDiy

JDiy开源框架。2.6版发布更新。 JDiy是一个超轻量级的java开源框架,同时也包含一套javaWeb建站开发平台。可以将JDiy应用于javaWeb/javaEE开发环境,或javaSE开发环境。 JDiy支持多种类型的数...

子秋
2013/01/07
7.9K
6
汽车租赁系统((SSH+MYSQL+JSP))

本文demo 下载视频观看地址:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1125 汽车租赁系统((SSH+MYSQL+JSP)) 汽车租赁系统(SSH+MYSQL+JSP+HTML5)(毕业论文10000......

智慧点点
2018/08/26
187
1
4.2 安装模块

原文来自:https://dkvirus.gitbooks.io/-npm/content/di-si-zhang-npm-bao-guan-li-gong-ju/42-an-zhuang-mo-kuai.html 前面介绍了 npm 的相关概念,从这一节开始介绍 npm 的 API 文档,不需......

嘘别吵_4d1c
2017/12/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
43
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部