2022-12-09 webpack支持ts

webpack 支持 ts

1. npm install -g typescript (支持 tsc)

2. tsconfig.json

3. 两种思路

   1. 使用 typescript (tsc 对代码进行编译), 配置ts-loader
   2. babel编译ts, ts只进行语法校验

4. webpack 配置 ts-loader

   1. 底层依赖 typescript (额外不需要安装 typescript, 只安装 ts-loader)
   2. 配置

      {
        test: /\.ts$/
        use: ['ts-loader']
      }
      

   3. 不太好支持新的语法(ts 中只处理了语法转化, 但是新的特性没有被 babel 处理)

5. babel-loader 编译 ts

   1. @babel/preset-typescript 帮忙处理 typescript 语法填充

      {
        test: /\.ts$/
        use: ['babel-loader']
      }
      
      // .babelrc
      {
        presets: [
          ['@babel/preset-env', { builtIns: 'usage', corejs: 3 }],
          ['@babel/preset-typescript']
        ]
      }
      

   2. babel-loader 的缺点: 在 build 阶段不会 ts 编译报错, 只会在代码的运行的时候提示报错 (不太友好)

6. typescript 最佳实践

   {
      test: /\.ts$/
      use: ['babel-loader']
   }
   
   // package.json
   "ts-check": "tsc --noEmit", // 只进行校验, 不生成文件
   "build": "npm run ts-check && webpack" // 构建之前先进行编译检查