VsCode下部署TypeScript环境(通用版)

前言:

一般情况下,VsCode下部署TypeScript环境只需要3个步骤

①安装node.js(自带npm)

官网直接下载:https://nodejs.org/en/

安装完用cmd命令或者VsCode中的终端 查看是否安装成功显示版本号

node -v

npm -v

②使用npm命令安装TypeScript

npm install -g typescript

③创建tsconfig.json配置文件

tsc --init

到此已经部署完了。

但是在实际开发中 可能遇到很多问题

比如:利用npm命令安装TypeScript

npm install -g typescript

这个命令时,报错,无法ping通地址

PSnpm安装插件过程:从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常)

这时我们需要更换npm服务器下载地址

因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以我们乐于分享的淘宝团队干了这事。

提供了npm对应的国内镜像地址https://registry.npm.taobao.org

来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

而淘宝对于提供的这个npm镜像地址,自己定制了cnpm命令行工具

用cnpm安装的插件都是从该像下载的

安装cnpm的方法:

npm install -g cnpm --registry=https://registry.npm.taobao.org

或者

npm config set registry http://registry.npm.taobao.org/
npm install -g cnpm

第一个命令由淘宝提供,意思是使用npm去安装cnpm。同时设置npm的地址为淘宝的镜像地址(或者只是在安装时使用淘宝镜像地址,并没有改动npm的原始地址。这个我没有实验不太清楚。感兴趣可以去试试:用这串命令安装完cnpm后,查看一下npm的地址看看有没有改动。)

原则上,只要更改了npm的服务器地址,不安装cnpm命令行工具也是可行的。

以下为通用版本正文:

1.先查看系统是否安装typeScript,命令行运行 tsc -v,出现版本号,说明已安装

这里已经安装,没有安装为报错

2.如果没有,执行以下步骤:

(1)检查是否安装了cnpm, 查看一下你是否安装了cnpm

npm list --depth=0 -global

这里显示只安装了react

(2)npm镜像替换成淘宝

①得到原本的镜像地址

npm get registry 

②替换成淘宝的(两种方式自选一种,选第二种前提需要安装yarn)

npm config set registry http://registry.npm.taobao.org/

yarn config set registry http://registry.npm.taobao.org/

假设需要换回原来的地址

npm config set registry https://registry.npmjs.org/

(3)替换完淘宝镜像(原则上只要将npm的镜像地址更换成淘宝的镜像地址,就已经可以使用npm命令来安装TypeScript,这里只是选装cnpm),安装cnpm

npm install -g cnpm

(4)检查是否已安装cnmp

npm list --depth=0 -global

已经多了一个cnpm证明安装成功

(5)使用cnpm安装TypeScript

cnpm install -g typescript

(6)在项目根目录中创建tsconfig.json配置文件

tsc --init

已有这个文件但里面没有配置信息,可以删掉重新生成。

额外:

想要编写使用jsx/tsx,需在tsconfig.json中修改配置文件

将这个"jsx"参数解除注释。

发布了34 篇原创文章 · 获赞 18 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/ChickenBro_/article/details/91852923