typescript开发后端(教你使用webpack打包编译TypeScript代码)
类别:编程学习 浏览量:2515
时间:2021-10-20 08:27:21 typescript开发后端
教你使用webpack打包编译TypeScript代码TypeScript打包webpack整合
通常情况下,实际开发中我们都需要使用构建工具对代码进行打包;
TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS;
步骤如下:
初始化项目
进入项目根目录,执行命令 npm init -y
,创建package.json文件
下载构建工具
命令如下:
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
共安装了7个包:
- webpack:构建工具webpack
- webpack-cli:webpack的命令行工具
- webpack-dev-server:webpack的开发服务器
- typescript:ts编译器
- ts-loader:ts加载器,用于在webpack中编译ts文件
- html-webpack-plugin:webpack中html插件,用来自动创建html文件
- clean-webpack-plugin:webpack中的清除插件,每次构建都会先清除目录
配置webpack
根目录下创建webpack的配置文件webpack.config.js
:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { optimization:{ minimize: false // 关闭代码压缩,可选 }, entry: "./src/index.ts", devtool: "inline-source-map", devServer: { contentBase: './dist' }, output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", environment: { arrowFunction: false // 关闭webpack的箭头函数,可选 } }, resolve: { extensions: [".ts", ".js"] }, module: { rules: [ { test: /\.ts$/, use: { loader: "ts-loader" }, exclude: /node_modules/ } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title:'TS测试' }), ] }
配置TS编译选项
根目录下创建tsconfig.json,配置可以根据自己需要
{ "compilerOptions": { "target": "ES2015", "module": "ES2015", "strict": true } }
修改package.json配置
修改package.json添加如下配置
{ ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack serve --open chrome.exe" }, ... }
项目使用
在src下创建ts文件,并在并命令行执行npm run build
对代码进行编译;
或者执行npm start
来启动开发服务器;
Babel
除了webpack,开发中还经常需要结合babel来对代码进行转换;
以使其可以兼容到更多的浏览器,在上述步骤的基础上,通过以下步骤再将babel引入到项目中;
虽然TS在编译时也支持代码转换,但是只支持简单的代码转换;
对于例如:Promise等ES6特性,TS无法直接转换,这时还要用到babel来做转换;
安装依赖包:
npm i -D @babel/core @babel/preset-env babel-loader core-js
共安装了4个包,分别是:
- @babel/core:babel的核心工具
- @babel/preset-env:babel的预定义环境
- @babel-loader:babel在webpack中的加载器
- core-js:core-js用来使老版本的浏览器支持新版ES语法
修改webpack.config.js配置文件
module: { rules: [ { test: /\.ts$/, use: [ { loader: "babel-loader", options:{ presets: [ [ "@babel/preset-env", { "targets":{ "chrome": "58", "ie": "11" }, "corejs":"3", "useBuiltIns": "usage" } ] ] } }, { loader: "ts-loader", } ], exclude: /node_modules/ } ] }
如此一来,使用ts编译后的文件将会再次被babel处理;
使得代码可以在大部分浏览器中直接使用;
同时可以在配置选项的targets中指定要兼容的浏览器版本;
到此这篇关于使用webpack打包编译TypeScript代码的文章就介绍到这了,更多相关webpack打包编译TypeScript内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- webpack打包公共文件(webpack文件打包错误异常)
- webpack常用的配置(webpack-dev-server搭建本地服务器的实现)
- webpack打包分析(webpack代码分片的实现)
- webpack源码解析(80行代码写一个Webpack插件并发布到npm)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- 如何在webpack中搭建项目(如何在webpack项目中调试loader插件)
- typescript开发后端(教你使用webpack打包编译TypeScript代码)
- vscode报错提示框(关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题)
- webpack打包后的代码(webpack几种手动实现HMR的方式)
- webpack打包后css路径(Webpack 中 css import 使用 alias 相对路径的方法)
- 前端webpack方面的优化(webpack的移动端适配方案小结)
- webpack配置项流程先后顺序(Webpack中publicPath使用详解)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
热门推荐
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- 最简单的wds设置(快速解决WDCP面板环境磁盘撑满问题)
- sql数值函数大全(sql中mod函数取余数的用法)
- 宝塔部署ssl证书(宝塔面板设置SSL并开启HTTPS的方法)
- docker shell教学(docker安装rockerChat设置聊天室的详细步骤)
- sqlite删除数据(SQLite Delete详解及实例代码)
- mysql 双主双备(MySQL配置了双主,是如何避免出现数据回环冲突的)
- sql server2012自动备份(SQL SERVER 2012数据库自动备份的方法)
- 颜色识别模块抓取物体(Referer原理与图片防盗链实现方法详解)
- mysql死锁情况(MySQL kill不掉线程的原因)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9