webpack中对TypeScript进行打包配置

typeScript作为近两年比较流行的技术，被好多狂热的技术追求者所喜爱，甚至一些社区的脚手架项目都推荐使用者使用TS来开发，我们知道webpack是默认对js做模块化打包的，那么ts是怎么在webpack中配置打包的呢？(本文默认读者会ts,将不对typescript概念等做讲解，本文目的在于对其打包)

我们创建一个ts的webpack项目。

我们将官网中的demo粘贴到index.tsx中。

然后配置简单的webpack出入口，这时候，Webpack肯定是不认识ts文件的，所以我们肯定还需要 loader 来完成。在ts官网，为我们提供了 ts-loader 来专门处理ts文件。所以我们需要安装 ts-loader ,同时不要忘了安装 typescript 。

并且把webpack.comfig.js文件做如下配置

这时候，如果你打包的话，会发现，报这样的错误

这时候再打包试一下，就可以打包成功了，可以拿个html文件去验证一下打包后js文件的运行。

现在设想这样一种情况，我们在项目中应用了一个第三方库，如lodash，那么可能我们在使用lodash的API时，也希望做一些参数的类型校验，于是我们就需要去装一个关于这个库的类型校验文件

这时候就会发现，我们在文件中，使用

这种传统JS的引用方式，发生了报错，我们改成

这种形式就可以了，这样就可以使我们的语法更加规范，更符合开发者对于这个库的使用方式的期待,再比如对于下面这种，不符合API期望的传参形式，也会被警告

本文介绍了关于ts的打包配置，ts作为一个比较新的技术，优势也是很明显的，可以在你的项目中尝试着去使用哦！

TypeScript项目和tsconfig.json

首先安装TypeScript编译器

npm i -g typescript

进入项目目录，新建一个 hello.ts

function sayHello(name: string) {

return 'Hello, ' + name

}

let myName = 'Cheng Wang'

console.log(sayHello(myName))

然后执行

tsc hello.ts

编译器会生成 hello.js

function sayHello(name) {

return 'Hello, ' + name

}

var myName = 'Cheng Wang'

console.log(sayHello(myName))

为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来存储项目配置，如果运行 tsc 时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：

{

"compilerOptions": {

"outFile": "dist/app.js",

"sourceMap": true

},

"files": [

"src/app.ts"

]

}

直接运行 tsc ，会自动把 src/app.ts 编译到 dist/app.js 。

关于这个配置文件的更多选项，可以看 官方文档 。

使用模块

TypeScript中，模块的使用方法与ES6一致。

src/modules/utilities.ts ：

function getUrlParam(key: string) {

const REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i')

let result: string[] = location.search.substr(1).match(REG_PATTERN)

if (result !== null) {

return decodeURIComponent(result[2])

} else {

return null

}

}

export { getUrlParam }

src/app.ts ：

import { getUrlParam } from './modules/utilities'

let deviceType: string = getUrlParam('deviceType')

console.log(deviceType)

编译后的app.js（TypeScript编译器在输出单个文件时，只能使用AMD或System模块规范）：

define("modules/utilities", ["require", "exports"], function (require, exports) {

"use strict"

function getUrlParam(key) {

var REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i')

var result = location.search.substr(1).match(REG_PATTERN)

if (result !== null) {

return decodeURIComponent(result[2])

}

else {

return null

}

}

exports.getUrlParam = getUrlParam

})

define("app", ["require", "exports", "modules/utilities"], function (require, exports, utilities_1) {

"use strict"

var deviceType = utilities_1.getUrlParam('deviceType')

console.log(deviceType)

})

使用NPM库

我们开发JS程序的时候，要用到NPM上的第三方的库，比如jQuery、Lodash等，但是绝大多数库都是用JS写的，没有类型提示，我们也不能在在代码中将这些库作为模块引入。

比如我们需要在项目中使用Lodash：

npm i --save lodash

然后在代码中引入：

import * as _ from 'lodash'

console.log(_.camelCase('helloworld'))

运行 tsc 则报错：

src/app.ts(1,20): error TS2307: Cannot find module 'lodash'.

如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。

Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_modules目录中找到相应的JS库，并编译到最终的JS代码中。

先安装Typings工具：

npm i -g typings

然后安装Lodash的定义文件：

typings install --save lodash

Typings会去NPM、Bower上寻找库的作者加的定义文件，但是有的库如jQuery并没有官方的定义文件，则需要从社区维护的 DefinitelyTyped 目录下安装：

typings install --save --ambient jquery

然后再tsconfig.json中的files配置中加入一条：

"files": [

"src/app.ts"，

"typings/main.d.ts"

]

此时编译就不会提示找不到模块了。

安装好定义文件之后，如果使用Visual Studio Code等对TypeScript支持较好的编辑器，则会提供更加强大的代码提示功能。

使用Webpack构建

TypeScript编译器支持很多模块组织规范，如ES6、commonJS、AMD等，但是如果想要将多个ts文件打包成一个文件，TypeScript只支持AMD和System，对于浏览器应用来说，还需要引入第三方的模块加载器。如果使用Webpack配合TypeScript的loader，则可以方便地构建浏览器可以运行的JS代码。

首先安装Webpack和ts-loader：

npm i webpack -g

npm i ts-loader --save-dev

然后配置项目目录中的webpack.config.js:

module.exports = {

entry: './src/app.ts',

output: {

filename: 'app.js',

path: './dist'

},

resolve: {

extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']

},

module: {

loaders: [

{ test: //.ts$/, loader: 'ts-loader' }

]

}

}

然后就可以通过运行 webpack 来构建了，构建生成的代码自带了webpack的模块加载器，可以直接在浏览器中运行。

---