前言
最近在学习typescript，也就是我们常说的TS，它是JS的超集。具体介绍就不多说了，今天主要是带大家用webpack从零搭建一个TS开发环境。直接用传统的tsc xx.ts文件进行编译的话太繁琐，不利于我们开发，经过这次手动配置，我们也能知道vue3内部对TS的webpack进行了怎样的配置，废话不多说进入正题。
Node 编译TS
先讲讲如何运行ts文件吧，最传统的方式当然是直接输入命令
tsc xxx.ts
当然你必须得先安装过ts，如果没有请执行以下命令
npm install typescript -g
安装后查看下版本
tsc --version
这样我们就能得到编译后的js文件了，然后我们可以通过node指令
node xxx.js
进行查看，当然也可以新建一个HTML页面引入编译后的js文件
我们从上可以发现有点小复杂，那可不可以直接通过Node直接编译TS呢？接来下就是介绍这种方法 使用ts-node 就可以得到我们想要的效果 安装
npm install ts-node -g
另外ts-node需要依赖 tslib 和 @types/node 两个包,也需要下载
npm install tslib @types/node -g
现在，我们可以直接通过 ts-node 来运行TypeScript的代码
ts-node xxx.ts
如果遇到很多ts文件，那我们用这种方法也会觉得繁琐，所以我们最好是用webpack搭建一个支持TS开发环境，这样才是最好的解决方案。
webpack搭建准备工作
先新建一个文件夹 下载 webpack webpack-cli
npm install webpack webpack-cli -D
下载 ts tsloader(编译ts文件)
npm install typescript ts-loader -D
下载 webpack-dev-server(搭建本地服务器)
npm install webpack-dev-server -D
下载 html模板插件
npm install html-webpack-plugin -D
初始化webpack
npm init
初始化ts
tsc --init
新建配置文件 webpack.config.js
初始化后文件结构如下图所示，当然还有一些测试ts和html需要自己手动创建下
webpack 配置
配置之前我们先去package.json中添加两个运行和打包指令
webpack.config.js
代码中有详细说明哦
代码语言：javascript复制const path = require('path')//引入内置path方便得到绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin')//引入模板组件
module.exports = {
mode: 'development',//开发模式
entry: './src/main.ts',//入口文件地址
output: {
path: path.resolve(__dirname, "./dist"),//出口文件，即打包后的文件存放地址
filename: 'bundle.js' //文件名
},
devServer: {
},
resolve: {
extensions:['.ts', '.js', '.cjs', '.json'] //配置文件引入时省略后缀名
},
module: {
rules: [
{
test: /.ts$/, //匹配规则 以ts结尾的文件
loader: 'ts-loader' //对应文件采用ts-loader进行编译
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html' //使用模板地址
})
]
}
复制代码配置完成我们可以进行测试了，执行指令
npm run serve
打包指令
npm run build
End
看完的话点个赞吧~~
