Typescript 打包配置

如果项目中使用的是Typescript，那么打包的时候，会和之前有些差异。

下面，我们来看看webpack 中如何配置，来支持Typescript 。

我们先使用命令 npm init 新建一个项目。

然后我们在项目跟目录下新建文件webpack.config.js 与 文件夹 src 。

然后，我们在项目中把webpack 先下载进来：

npm install webpack webpack-cli --save-dev

然后，我们在src 下新建一个typescript 文件 index.ts ，并写入typescript 代码，如下。

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 = 'greeting'
button.onclick = function () {
    alert(greeter.greet())
}

document.body.append(button);

上面typescript 代码在浏览器中是无法运行的，因此，现在我们来配置webpack 打包。

const path = require('path')

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

上面是基本的配置，下面我们要配置typescript 对应的loader : ts-loader (typescript 官方提供的loade)，可以配置一下它的excludes(node_modules中的文件排除)。

const path = require('path')

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

当然，我们得安装一下ts-loader 如下。

npm install ts-loader typescript --save-dev

这时，我们执行webpack 打包命名会发现，还是会报错无法成功打包，下面是报错信息。

意思是在使用ts-loader 打包ts 文件的时候，需要tsconfig.json 但它是空的。因此，我们需要在项目中加上这个文件，并做相应配置。

下面我们在项目根目录下创建文件tsconfig.json 。这里我们写上一些最基本的配置项，如下。

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "allowJs": true
  }
}

现在，运行打包命令，就可以成功打包了。

当我们在typescript 的项目中，使用其他的库，比如 lodash，可以像写 原生js 一样的引入与使用，但是，那样的话，就丧失了ts类型检测的优点了。我们可以再安装lodash 对应的typescript 里的类型文件，来解决这个问题。

我们安装@type/lodash (它使得typescript 能正确识别lodash 中的一些值的类型...)

npm install @types/lodash --save-dev