jiayoue.jpg
写在前面
typeScript作为近两年比较流行的技术，被好多狂热的技术追求者所喜爱，甚至一些社区的脚手架项目都推荐使用者使用TS来开发，我们知道webpack是默认对js做模块化打包的，那么ts是怎么在webpack中配置打包的呢？(本文默认读者会ts,将不对typescript概念等做讲解，本文目的在于对其打包)
开始
我们创建一个ts的webpack项目。
|--src
|--index.tsx
|--package.json
|--webpack.config.js
我们将官网中的demo粘贴到index.tsx中。
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
然后配置简单的webpack出入口，这时候，Webpack肯定是不认识ts文件的，所以我们肯定还需要loader来完成。在ts官网，为我们提供了ts-loader来专门处理ts文件。所以我们需要安装ts-loader,同时不要忘了安装typescript。
并且把webpack.comfig.js文件做如下配置
const path = require('path')
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
这时候，如果你打包的话，会发现，报这样的错误
err.png
所以，如果你要去打包一个ts项目，你要在你的根目录下创建一个'tsconfig.json'的文件！！
大家可以去ts官网去下载这个文件，也可以自己写，我们做一个简单的配置
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"module": "es6",
"target": "es5",
"allowJs": true,
}
}
这时候再打包试一下，就可以打包成功了，可以拿个html文件去验证一下打包后js文件的运行。
针对第三方库的校验
现在设想这样一种情况，我们在项目中应用了一个第三方库，如lodash，那么可能我们在使用lodash的API时，也希望做一些参数的类型校验，于是我们就需要去装一个关于这个库的类型校验文件
yarn add types/lodash -D
这时候就会发现，我们在文件中，使用
import _ from 'lodash'
这种传统JS的引用方式，发生了报错，我们改成
import * as _ from 'lodash'
这种形式就可以了，这样就可以使我们的语法更加规范，更符合开发者对于这个库的使用方式的期待,再比如对于下面这种，不符合API期望的传参形式，也会被警告
lodasherr.png
这就体现了typescript的优势所在，至于哪个库可以有这样的类型文件呢？我们可以在这里搜索下https://microsoft.github.io/TypeSearch/
写在后面
本文介绍了关于ts的打包配置，ts作为一个比较新的技术，优势也是很明显的，可以在你的项目中尝试着去使用哦！
网友评论