手摸手教你用webpack搭建TS开发环境

前言

最近在学习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

代码中有详细说明哦

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

看完的话点个赞吧~~