webpack加载使用typescript

最新推荐文章于 2024-08-14 14:02:53 发布

奋斗中的小余

最新推荐文章于 2024-08-14 14:02:53 发布

阅读量242

点赞数

文章标签： typescript webpack javascript

本文链接：https://blog.csdn.net/ywl_156/article/details/118979068

版权

本文介绍了如何将typescript与webpack结合使用，包括安装相关包、配置webpack.config.js和tsconfig.json文件，重点讲解了tsconfig.json中的一些常用选项及其详细解释。

摘要由CSDN通过智能技术生成

webpack加载使用typescript

1. 安装相关包

npm i -g typescript // 全局安装typescript

npm i -D ts-loader // 安装加载ts对应的loader

2. 在webpack.config.js中配置

module: {
  rules: [
    {
      test: /\.(ts)$/,
      exclude: /node_modules/,
      use: {
        loader: 'ts-loader'
      }
    }
  }

3. tsconfig.json配置文件

3.1 常用选项（主要掌握常用的就行，有很多选项我们是用不到的）

{
  "compilerOptions": {
    "target": "ES5", // 用于指定编译之后的版本
    "module": "ES6", // 用来指定要使用的模板标准
    "sourceMap": true, // 是否生成sourceMap，默认false  这个文件里保存的，是转换后代码的位置，和对应的转换前的位置。有了它，出错的时候，通过断点工具可以直接显示原始代码，而不是转换后的代码。
    "removeComments": true, // 编译完成后删除注释
    "noEmitOnError": true, // 当有错误时不生成文件，默认false
    "outDir": "./dist", // 用来指定编译后文件的存放位置
    "strict": true // 所有的严格检查的总开关，默认false
  }
}

3.2 选项详解

// 全局安装typescript后，可在命令行中用tsc命令生成tsconfig.json文件
tsc --init

{
  "compilerOptions": {
    /* 基本选项 */
    // "incremental": true,                         /* 启用增量编译 */

最低0.47元/天解锁文章