webpack - TypeScript配置
TypeScirpt是微软开源的一款语言,它是javascript的超集,可以编译成javascript。 当构建大型项目的时候,使用ts可以极大的提高开发效率。
下面是使用构建工具webpack配置typescript的介绍。
typescript开发环境搭建
- 通过
npm init
初始化一个项目, 使用npm install --save-dev typescript ts-loader
安装ts和loader。
这里使用ts-loader搭配webpack3.0打包时出现了一个错误,原因是二者不匹配,将ts-loader退化为3.1.1解决了问题。
- 配置webpack.config.js文件。
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader'
}
}
]
}
- 配置tsconfig.json文件,
tsconfig.json文件是ts位于项目根目录下的配置文件,与babel的.babelrc类似。配置如下:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"allowJs": true
},
"include": [
"./src/*"
],
"exclude": [
"./node_modules"
]
}
tsconfig.json的配置选项有很多,更多细节可以参考 tsconfig.json配置。
类库的类型声明
ts中变量有类型的,在我们配合使用其他js类库时,比如lodash,vue等。也可以使得这些类库中的一些函数等也具有类型判别。 当我们传入错误的类型时,可以针对性的提示类型错误信息。
只需要安装对应的声明文件。比如
'npm install --save @types/lodash'或者@types/vue等。
awesome-typescirpt-loader
除了官网提供的ts-loader外,也可以使用开发者开发的awesome-typescript-loader,二者的作用是相似的,可以使用这个loader代替ts-loader。查看更多关于这个loader的信息,访问
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。