【TS3】搭建本地开发环境

1、安装Node.js与npm

从Node.js官网下载并安装最新LTS版本,安装完成后通过终端验证

说明:Node.js是TS的运行基础,npm用于包管理

2、安装TypeScript编译器

npm install xxx命令为本地安装,会在当前路径下创建node_modules文件夹,安装的模块都在这里。

npm install -g xxx为全局安装,安装在node.js的默认路径下。

使用npm config get prefix命令可以查看全局安装的默认路径:

可以使用npm config set prefix="xxx"命令来修改全局安装路径,这里的等号两边不能有空格,否则会出现异常。

通过命令行设置npm的全局安装路径和缓存路径:

npm config set prefix="D:/nodejs/node_global"

npm config set cache="D:/nodejs/node_cache"

如果需要使用淘宝镜像源加速下载,可以运行:

npm config set registry https://registry.npmmirror.com

主流镜像源

‌淘宝镜像‌(https://registry.npmmirror.com

支持npm官方仓库同步,提供更快的下载速度和稳定性。 ‌

‌阿里云镜像‌(https://r.cnpmjs.org

由阿里云提供,支持同步npm官方仓库,适合企业级用户。 ‌

‌腾讯云镜像‌(https://mirrors.cloud.tencent.com/npm/)

适用于腾讯云用户,提供稳定的下载速度。 ‌

‌华为云镜像‌(https://repo.huaweicloud.com/repository/npm/)

由华为云提供,适合国内用户,访问速度快。 ‌

其他可选方案

‌360 CDN‌(宝塔镜像) 提供丰富的npm包资源,适合网站或博客的包加载。 ‌

‌BootCDN‌(www.bootcdn.cn

同步CDNJS数据,部分包可能无法找到。 ‌

‌临时使用‌-切换方法

安装命令:npm install package-name --registry=https://registry.npmmirror.com

验证:npm config get registry ‌

接着,安装一些全局常用的模块

npm install -g vue-cli

npm install -g webpack

npm install -g cnpm

使用以下命令查看当前配置:

npm config list

npm config get registry

3、输入以下命令来全局安装TypeScript:

npm install -g typescript

tsc --version 或 tsc -v

若出现报错:'tsc' 不是内部或外部命令,也不是可运行的程序或批处理文件。

搜索 查看系统高级设置 点击 环境变量,

然后使用 npm config get prefix 查找npm目录

在环境变量里的系统变量新建变量名: NODE_PATH

找到用户变量和系统变量里的path, 编辑新建在末尾添加上%NODE_PATH%,确定保存。

4、设置VsCode

cmd + shift + p,输入setting

Open Workspace Settings 也会打开UI设置界面;

Open User Settings (JSON) 会打开用户设置 settings.json 文件;

参考: https://blog.csdn.net/qq_34414916/article/details/85156499

Open Workspace Settings (JSON) 会打开工作区设置 settings.json 文件

vscode存在两种设置 settings.json 的方式

User Settings 用户设置:用户级设置,该用户打开的所有vscode共用这个设置

Workspace Settings 工作区设置: 目录下.vscode 隐藏文件夹,

设置文件为.vscode/settings.json,作用于当前工作区或项目,优先级高于用户设置

5、测试HelloWord

新建app.ts文件

输入以下内容

var message:string = "Hello World"

console.log(message)

打开命令行,进入文件所在目录

执行 tsc app.ts 生成app.js文件

执行 node app.js 输出 Hello World

若出现错误: 因为在此系统上禁止运行脚本,也就是说没有权限。

使用get-ExecutionPolicy查看权限。

输出为Restricted则说明权限不够

使用下列代码提升权限

Set-ExecutionPolicy -Scope CurrentUser

输入RemoteSigned

参考:https://blog.csdn.net/qq_43802768/article/details/124356677

相关推荐
Bolt15 小时前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
Flynt1 天前
装上TypeScript 7.0 RC之后,最让我意外不是10倍提速
typescript·visual studio code
疯狂SQL1 天前
手写高性能在线 JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
typescript·json·next.js·web worker·前端性能优化·esbuild·源码实战
Momo__5 天前
TypeScript NoInfer<T>——精准控制泛型推断的工具类型
前端·typescript
通信小呆呆6 天前
当算法有了“五感”:多模态数据融合如何向人体感官协同学习?
人工智能·学习·算法·机器学习·机器人
H__Rick6 天前
自动对焦学习-3
人工智能·学习·计算机视觉
Daisy Lee6 天前
量化学习-第1章-什么是量化金融
学习·金融·datawhale
Alsn866 天前
等待学习-学习目录:Docker 容器安全攻防
学习·安全·docker
YM52e6 天前
买菜计算器小应用 - HarmonyOS ArkUI 开发实战-PC版本
学习·华为·harmonyos·鸿蒙·鸿蒙系统
小雨下雨的雨6 天前
HarmonyOS ArkUI训练营入门-组件掌握系列-Animation 动画效果实现-PC版本
学习·华为·harmonyos·鸿蒙