webpack中对TypeScript进行打包配置

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作为一个比较新的技术，优势也是很明显的，可以在你的项目中尝试着去使用哦！