2023-5-8 webpack(ts-loader和babel-loader处理ts的对比)

144 阅读1分钟

image.png

如图配置,设置哪些文件类型可以作为模块被引用

image.png

image.png

image.png

babel不需要通过typescript,可以直接通过babel-loader结合@babel/preset-typescript预设将typescript编译为javascript代码

image.png

如图:babel-loader结合@babel/preset-typescript和@babel/preset-env进行了ts的编译和js浏览器适配和polyfill

ts-loader和babel-loader对比:

ts-loader会在打包的时候对代码进行类型检测,如果有类型错误则打包失败

babel-loader会在打包的时候进行polyfill

image.png

typescript编译最佳实践: 开发阶段npm run type-check-watch,进行实时代码类型检测,打包的时候再使用npm run build进行打包(通过babel-loader结合各种预设和polyfill)