TypeScript - TypeScript 结合打包工具-北京尧图网络

一、webpack1、引入通常实际开发中我们都需要使用构建工具对代码进行打包TS 同样也可以结合构建工具一起使用2、使用步骤初始化项目创建 package.json 文件npm init -y依赖配置npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin依赖说明webpack构建工具 webpackwebpack-cliwebpack 的命令行工具webpack-dev-serverwebpack 的开发服务器typescriptTS 编译器ts-loaderTSTS 加载器用于在 webpack 中编译 TS 文件html-webpack-pluginwebpack 中的 HTML 插件用来自动创建 HTML 文件clean-webpack-pluginwebpack 中的清除插件每次项目构建都会先清除目录创建并配置 webpack.config.js 配置文件constpathrequire(path);constHtmlWebpackPluginrequire(html-webpack-plugin);// 引入 HTML 插件const{CleanWebpackPlugin}require(clean-webpack-plugin);// 引入 clean 插件module.exports{// webpack 中的所有的配置信息都写在 module.exports 中entry:./src/index.ts,// 定义入口文件output:{path:path.resolve(__dirname,dist),// 定义打包后文件的所在目录filename:bundle.js// 定义打包后的文件名称},module:{// 定义 webpack 打包时要使用模块rules:[// 定义加载规则{test:/\.ts$/,// 定义规则生效的文件use:[// 定义 loaderts-loader],exclude:/node_modules/,// 定义排除的文件},],},plugins:[// 定义 webpack 插件newCleanWebpackPlugin(),newHtmlWebpackPlugin({// title: Hello TypeScript,template:./src/index.html}),],resolve:{// 定义引用模块extensions:[.ts,.js]},mode:development};创建并配置 tsconfig.json 配置文件{compilerOptions:{target:ES2015,module:ES2015,strict:true}}在 package.json 配置文件中添加如下配置{scripts:{test:echo \Error: no test specified\ exit 1,build:webpack,start:webpack serve --open}}命令行执行对代码进行编译或启动开发服务器npm run buildnpm run start二、Babel1、引入开发中经常需要结合 Babel 来对代码进行转换以使其可以兼容更多的浏览器在 webpack 的基础上需要将 Babel 结合到项目中2、使用步骤依赖配置npm i -D babel/core babel/preset-env babel-loader core-js依赖说明babel/coreBabel 的核心工具babel/preset-envBabel 的预定义环境babel-loaderBabel 在 webpack 中的加载器core-jscore-js 可以使老版本的浏览器支持新版 ES 语法配置 webpack.config.js 配置文件constpathrequire(path);constHtmlWebpackPluginrequire(html-webpack-plugin);// 引入 HTML 插件const{CleanWebpackPlugin}require(clean-webpack-plugin);// 引入 clean 插件module.exports{// webpack 中的所有的配置信息都写在 module.exports 中entry:./src/index.ts,// 定义入口文件output:{path:path.resolve(__dirname,dist),// 定义打包后文件的所在目录filename:bundle.js,// 定义打包后的文件名称environment:{arrowFunction:false,// 不使用箭头函数},},module:{// 定义 webpack 打包时要使用模块rules:[// 定义加载规则{test:/\.ts$/,// 定义规则生效的文件use:[// 定义 loader{// 配置 Babelloader:babel-loader,// 定义加载器options:{presets:[// 定义预定义环境[babel/preset-env,// 指定环境的插件{targets:{// 定义要兼容的目标浏览器chrome:58,ie:11},corejs:3,// 定义 core-js 的版本useBuiltIns:usage// 定义使用 core-js 的方式usage 表示按需加载}]]}},ts-loader],exclude:/node_modules/,// 定义排除的文件},],},plugins:[// 定义 webpack 插件newCleanWebpackPlugin(),newHtmlWebpackPlugin({// title: Hello TypeScript,template:./src/index.html}),],resolve:{// 定义引用模块extensions:[.ts,.js]},mode:development};

TypeScript - TypeScript 结合打包工具

相关推荐

Boost.Asio异步网络编程实战：从Echo服务端到多线程消息转发

嵌入式基础day07学习笔记

中兴B860AV1.1-T2免拆ADB刷机指南

更多资讯

工控现货的本质：四层技术校验与系统兼容性保障

硕博新生入学适应指南：助力学子快速开启新阶段学术成长之路

LanceDB Node.js 物化视图列选择：深入解析 MaterializedViewSelect 类型别名

玩客云刷Armbian部署Home Assistant：低成本智能家居中枢实战

PRQL 的 Raku 语法实现：从 Grammars 定义到形状断言测试的完整指南

PulseBlaster在NV色心实验中的纳秒级时序控制原理与实践

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？