Webpack系列——TypeScript 的打包配置

一、TypeScript

TypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts ，需要安装特定的 loader 来转换 ts 语法。

1.1 依赖安装

npm install typescript ts-loader -D

1.2 webpack.config.js

const path = require('path')
​
module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map'
    entry: './src/index.ts' // 以 index.ts 文件作为入口文件
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node-modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

设置 “ ./src/index.ts ”作为入口文件，利用 ts-loader 加载所有 .ts以及.tsx结尾的文件，node_modules文件夹下的除外，在当前路径下的 dist 文件夹生成 bundle.js 文件。

注意： resolve 可以配置模块的解析方式，一般常用来设置 alias 别名以及 extensions 后缀名解析顺序。

1.3 tsconfig.json

在根目录下创建 tsconfig.json，它是 ts 的配置文件。

{
    "compilerOptions": {
        "outDir": "./dist/", // 这个可以不用写，因为在webpack配置中已经写了
        "noImplicitAny": true, // 不允许隐式 any 类型
        "module": "es6", // 模块的引入方式
        "target": "es5", // 打包后编译成什么形式
        "jsx": "react", // 引入 react
        "allowJs": true, // 在ts文件中允许引入js文件
        "moduleResolution": "node" // 引入模块的方式
    }
}

二、js 改写 ts 示例

2.1 js 示例

greeter.js

import _ from 'lodash';
​
class Greeter {
    constructor(message) {
        this.greeting = message
    }
    greet() {
        return _.join(['Hello, ', this.greeting], '')
    }
}
export default Greeter;

index.js

import Greeter from './greeter.js';
​
let greeter = new Greeter('JavaScript');
​
console.log(greeter.greet())

2.2 ts 示例

greeter.ts

import * as _ from 'lodash';
​
class Greeter {
    greeting: string,
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return _.join(['Hello, ', this.message], '')
    }
}
​
export default Greeter;

注意：

由于 lodash没有默认导出，所以需要改为上面 ts 中引入 lodash 的写法，如果想按照原来的 import _ from 'lodash'，则需要在 tsconfig.js 中添加参数 allowSyntheticDefaultImports,将其设置为 true 。

{
    "compilerOptions": {
        // ...
        "allowSyntheticDefaultImports": true
    }
}

在 ts 中引入第三方库的时候还需要安装对应的类型声明文件，避免引用错误，无法在 ts 中正确使用, 调用的无法错误无法提示等问题。

npm install @types/lodash -D

关于声明文件

在 TS 中，有一类文件是以 .d.ts 结尾的，这一类文件属于类型声明文件。TS 比 JS 多了类型检查，而这个声明文件就是类型检查的关键，所以为了让 TS 能够正确识别第三方库的 JS ，就需要安装特定的声明文件。对于相关的第三方库是否有对应的类型声明文件，避免引用错误，可以在TypeSearch查询进行安装。