Webpack与TypeScript

野性酷女 2024-04-18 12:39 64阅读 0赞

### 文章目录 ###

*  引入
 *  使用
 *  问题

# 引入 #

TypeScript是最近一段时间非常火的一个JavaScript的超集。说是超集，那么自然TypeScript也完整的支持JavaScript语法，同时还提供了许多新特性。

那么Webpack也能够对TypeScript的源文件进行打包。

# 使用 #

首先创建一个新项目，就叫`typescript`。

然后在项目根目录下新建`src`文件夹、`webpack.config.js`配置文件。

在`src`文件夹下新建一个`index.ts`，写入如下内容：

class Greeter{
        greeting: string;
        constructor(message: string){
            this.greeting = message;
        }
        greet(): string{
            return `Hello ${this.greeting}`
        }
    }
    
    let test = new Greeter("Meskjei");
    
    alert(test.greet());

接着安装Webpack:

yarn add webpack webpack-cli

然后编写配置文件（webpack.config.js）：

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

既然使用了`ts-loader`，自然就要去安装它：

yarn add ts-loader

尝试直接打包的话，会发现报错，错误提示是缺少`tsconfig.json`文件。如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

那就新建一个`tsconfig.json`：

{
        
        "compilerOptions": {
        
            "outDir": "./dist",
            "module": "es6",
            "allowJs": true
        },
        "exclude": [
            "node_modules"
        ]
    }

保存之后就可以正常打包了。

# 问题 #

我们知道在编写TypeScript的时候，IDE是可以根据相关信息（例如函数参数个数、类型还有语法）来提示我们写的代码是否正确。

这在完全由TypeScript写就的代码中自然没有什么问题，可是我们可能需要引入第三方模块，而大部分第三方模块都是由JavaScript写成的，那么这个时候，调用第三方模块就不会有错误提示了。这该怎么办呢？

以`lodash`为例，我们修改一下`index.ts`文件：

import * as _ from 'lodash'
    class Greeter{
        greeting: string;
        constructor(message: string){
            this.greeting = message;
        }
        greet(): string{
            return _.join(["Hello", this.greeting], ' ');
        }
    }
    
    let test = new Greeter("Meskjei");
    
    alert(test.greet());

我在代码中调用了`_.join()`方法，现在如果写的是一个错误的调用方式，那么IDE也不会提示。

解决方案是安装`@types/lodash`：

yarn add @types/lodash

安装完成之后重新打开源文件，如果是写成错误的形式，那么IDE就会提示错误了。

那么该怎么知道哪些模块可以安装对应的提示插件呢？

通过[TypeSearch][]这个网站查询就可以知道哪些组件有对应的在TypeScript下的提示插件了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

[TypeSearch]: https://microsoft.github.io/TypeSearch/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2ac81a7a310540e2ba78548297960818.png