webpack 支持 ts
npm install -g typescript (支持 tsc)
tsconfig.json
-
两种思路
- 使用 typescript (tsc 对代码进行编译), 配置ts-loader
- babel编译ts, ts只进行语法校验
-
webpack 配置 ts-loader
- 底层依赖 typescript (额外不需要安装 typescript, 只安装 ts-loader)
- 配置
{ test: /\.ts$/ use: ['ts-loader'] } - 不太好支持新的语法(ts 中只处理了语法转化, 但是新的特性没有被 babel 处理)
-
babel-loader 编译 ts
-
@babel/preset-typescript 帮忙处理 typescript 语法填充
{ test: /\.ts$/ use: ['babel-loader'] } // .babelrc { presets: [ ['@babel/preset-env', { builtIns: 'usage', corejs: 3 }], ['@babel/preset-typescript'] ] } babel-loader 的缺点: 在 build 阶段不会 ts 编译报错, 会正常生成dist目录下打包文件, 只会在代码的本地运行的时候提示报错 (不太友好)
-
-
typescript 最佳实践
{ test: /\.ts$/ use: ['babel-loader'] // babelrc文件中, 记得在presets中添加 @babel/preset-typescript } // package.json "ts-check": "tsc --noEmit", // 只进行校验, 不生成文件 "build": "npm run ts-check && webpack" // 构建之前先进行编译检查 "build:types": "tsc -p tsconfig.json --emitDeclarationOnly", // 生成类型文件
