构建ts开发环境

╰+哭是因爲堅強的太久メ 2022-12-07 15:06 136阅读 0赞

### 文章目录 ###

*   *  初始化环境与配置
     *  工程化配置
     *  node下运行ts文件

## 初始化环境与配置 ##

安装ts

npm i typescript -g

创建配置文件

tsc --init

创建项目管理文件

npm init -y

手动编译

tsc xxx.ts

## 工程化配置 ##

实现自动实时编译

**安装相关工具**  
webpack  
webpack-cli  
webpack-dev-server（开发服务器）  
ts-loader（加载编译ts文件）  
typescript（本地安装，方便依赖库使用，注意与全局区分）  
html-webpack-plugin（用于将生成的js与宿主页面合并）

npm i webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin

**创建编写webpack配置文件**  
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = { 
    	entry:'./src/index.ts',
    	output:{ 
    		filename:'app.js'
    	},
    	resolve:{ 
    		//模块导入扩展名处理
    		extensions:['.js','.ts','.tsx']
    	},
    	//增强调试，便于追踪错误
    	devtool:'cheap-module-eval-source-map',
    	module:{ 
    		rules:[{ 
    			test:/\.tsx?$/i,
    			use:[{ 
    				loader:'ts-loader'
    			}],
    			exclude:/node_modules/
    		}]
    	},
    	plugins:[
    		new HtmlWebpackPlugin({ 
    			template:'./public/index.html'
    		})
    	]
    }

**创建运行命令**  
package.json

"scripts": { 
      "dev":"webpack-dev-server --config ./build/webpack.config.js"
    }

**启动运行命令**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]  
**项目目录**  
![在这里插入图片描述][20200916140255634.png_pic_center]

## node下运行ts文件 ##

**安装配置**

npm i @types/node --save-dev
    npm i ts-node --g
    npm i typescript --save-dev

**运行**

ts-node xxx.ts

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/568e875f3ec54da09721ca72313f35f1.png
[20200916140255634.png_pic_center]: /images/20221123/c647e6f7516a47b7b308a01150bf93d1.png