深入浅出webpack学习(13)--使用TypeScript

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了深入浅出webpack学习(13)--使用TypeScript脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

认识TyPEScript

TypeScript是JavaScript的一个 超集,主要提供了类型检查系统和对ES6语法的支持。但不支持新的API。目前没有任何环境支持运行原生的TS代码,必须通过构建把它转换成JavaScript代码后才能运行。

下面是一个ts代码:

//show.js
//操作DOM元素,把content显示到网页上
//通过es6模块规范导出show函数
//给show函数增加类型检查

export function show(content: string) {

window.document.getElementById('app').innerText='hello,'+content

}
// main.ts
// 通过 ES6 模块规范导入 show 函数
import {show} From './show';
// 执行 show 函数
show('Webpack');

ts官方提供了能够将ts转换成JavaScript的编译器。你需要在当前项目根目录下新建一个用于配置编译选项的tsconfig.json文件,编译器默认会读取和使用这个文件,配置文件如下:

{

"compilerOptions": {
    "module": "commonjs", //编译出的代码采用的模块规范
    "target": "ES5", //编译出的代码采用ES的哪个版本
    "sourceMap": true //输出source map方便调试
},
"exclude": [    //不编译这些目录里的文件
    "node_modules"
]

}

通过**npm install -g typescript**安装编译器到全局后,你可以通过**tsc hello.ts**命令编译出**hello.js****hello.js.map**

### 减少冗余代码
TypeScript 编译其会有和在 3-1 使用ES6语言中 Babel 一样的问题:在把 ES6 语法转换成 ES5 语法时需要注入辅助函数, 为了不让同样的辅助函数重复的出现在多个文件中,可以开启 TypeScript 编译器的 importHelpers 选项,修改 tsconfig.JSON 文件如下:

{

"compilerOptions": {
    "importHelpers" : true
}

}

该选项的原理和babel中介绍的babel-plugin-transform-runtime非常类似,会把辅助函数换成以下语句:

var _tslib = require('tslib');
_tslib._extend(target);


### 集成webpack

要让webpack支持ts,需要解决以下两个问题:
  1. 通过loader把ts转换为JavaScript
  2. webpack在寻找模块对应的文件时需要尝试ts后缀
对于问题1,社区已经出现了几个可用的 Loader,推荐速度更快的 awesome-typescript-loader。 对于问题2,根据2-4 Resolve 中的 extensions 我们需要修改默认的 resolve.extensions 配置项。

const path = require('path');

module.exports = {
// 执行入口文件
entry: './main',
output: {

filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),

},
resolve: {

// 先尝试 ts 后缀的 TypeScript 码文件
extensions: ['.ts', '.js'] 

},
module: {

rules: [
  {
    test: /.ts$/,
    loader: 'awesome-typescript-loader'
  }
]

},
devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
};

在运行构建前需要安装上面用到的依赖:

npm i -D typescript awesome-typescript-loader

脚本宝典总结

以上是脚本宝典为你收集整理的深入浅出webpack学习(13)--使用TypeScript全部内容,希望文章能够帮你解决深入浅出webpack学习(13)--使用TypeScript所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。