我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

webpack4系列,如何处理typescript文件?在本文中,苏南大叔将要以.ts文件,如何在webpack中处理,为主要话题。typescriptjavascript的一个超集。截至到发稿,没有一个浏览器可以直接支持typescript,所以,对于.ts文件,都必须进行编译后才能使用。

苏南大叔:webpack4系列教程,如何处理typescript文件? - webpack-ts-loader
webpack4系列教程,如何处理typescript文件?(图8-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0typescript@3.9.5ts-loader@7.0.5

安装依赖包

typescript按理说应该是全局-g安装,不过您-D也是没有任何问题的:

npm i typescript -g

在安装typescript解释器的时候,您很可能需要下面这篇文章:

苏南大叔:webpack4系列教程,如何处理typescript文件? - npm-i-typescript
webpack4系列教程,如何处理typescript文件?(图8-2)

然后,为webpack安装ts-loader

npm i ts-loader -D

修改配置

import一个模块的时候,经常会省略后缀。所以要增加对.ts后缀的识别功能,并定义相关后缀的优先级别,配置resolve

module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
    },
    resolve: {   // 需要打包的文件后缀
        extensions: [".tsx", ".ts", ".js"]
    },
    //...
}

苏南大叔:webpack4系列教程,如何处理typescript文件? - webpack-config-ts
webpack4系列教程,如何处理typescript文件?(图8-3)

识别.ts文件:

module.exports = {
    mode: 'production', // 环境
    module: {
        rules: [{
                test: /\.tsx?$/,
                use: {
                    loader: 'ts-loader',
                }
            },
            //...
        ]
    }
    //...
}

增加tsconfig.json

还需要一个typescript的配置文件,放在项目根目录下面即可。否则会报错:

苏南大叔:webpack4系列教程,如何处理typescript文件? - tsconfig-need
webpack4系列教程,如何处理typescript文件?(图8-4)

内容如下:

{
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "./dist/",
        "target": "es5",
        "allowJs": true,
        "sourceMap":true, // 输出 Source Map 方便调试
        "importHelpers":true // 减少代码的冗余,类似:@babel/plugin-transform-runtime
    },
    "include": [
        "./src/*"
    ],
    "exclude": [
        "./node_modules"  
    ]
}
需要注意的是:这个配置文件是.json,并不是.js。所以,不要乱写注释。

苏南大叔:webpack4系列教程,如何处理typescript文件? - tsconfig
webpack4系列教程,如何处理typescript文件?(图8-5)

当然,这个配置文件,还可以使用命令行来创建:

tsc -init

如果是局部安装的typescript的话,可以执行:

npx tsc -init

这里会生出一个很大的带注释的默认.json文件,精简后的代码如下:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

苏南大叔本文的目的,并不是科普typescript,所以,就不对这些配置文件做过多描述了。

苏南大叔:webpack4系列教程,如何处理typescript文件? - tsconfig-default
webpack4系列教程,如何处理typescript文件?(图8-6)

测试代码

新增入口文件:./src/ts.ts

function greeter(person: string) {
    return "Hello, " + person;
}
let user = "sunan";
document.body.innerHTML = greeter(user);

苏南大叔:webpack4系列教程,如何处理typescript文件? - ts-code
webpack4系列教程,如何处理typescript文件?(图8-7)

入口配置:

module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
        ts: './src/ts.ts',
    },
}

测试结果:

苏南大叔:webpack4系列教程,如何处理typescript文件? - ts-result
webpack4系列教程,如何处理typescript文件?(图8-8)

相关链接

总结

typescript是另外一个代码分支了,苏南大叔在这里,先随便说几句。typescript不难,就是换换写法而已。大家不要有心理负担。更多webpack的相关经验文字,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack    typescript