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