webpack4系列教程，如何处理typescript文件？

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

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

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、typescript@3.9.5、ts-loader@7.0.5。

安装依赖包

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

npm i typescript -g

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

• https://newsn.net/say/npm-error-readableHighWaterMark.html

然后，为webpack安装ts-loader：

npm i ts-loader -D

修改配置

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

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

识别.ts文件：

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

增加tsconfig.json

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

内容如下：

{
    "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。所以，不要乱写注释。

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

tsc -init

如果是局部安装的typescript的话，可以执行：

npx tsc -init

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

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

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

测试代码

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

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

入口配置：

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

测试结果：

相关链接

• https://newsn.net/say/webpack-start.html
• https://newsn.net/say/webpack-jquery.html
• https://newsn.net/say/webpack-expose-loader.html
• https://newsn.net/say/webpack-provide-plugin.html
• https://newsn.net/say/webpack-css.html
• https://aka.ms/tsconfig.json

总结

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

• https://newsn.net/tag/webpack/

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