91引擎爱好者论坛

 找回密码
 立即注册
热搜: 91引擎
查看: 3863|回复: 5

91M2 TypeScript 开发环境安装指南--一路随云

[复制链接]
  • TA的每日心情
    郁闷
    2022-10-20 09:37
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]偶尔看看III

    12

    主题

    75

    帖子

    1990

    积分

    超级版主

    Rank: 8Rank: 8

    积分
    1990
    发表于 2022-6-25 16:30:38 | 显示全部楼层 |阅读模式


    91M2 TypeScript 开发环境安装指南1.Node.js 安装配置1.1下载 Node.js1.2 安装 Node.js2.Visual Studio Code 安装配置2.1 下载 Visual Studio Code2.2 安装 Visual Studio Code2.3 配置  Visual Studio Code2.4 安装中文语言包3.安装TypeScript 编译器4.使用VSCode 打开 91M2 TypeScript 脚本源码文件夹。5.更换编译后的js文件位置。6.答疑问解惑6.1 运行TS脚本需要这么多工具,搭建服务器很麻烦。6.2 脚本文件是强制输出到Mir200/Script 下吗,那我意味着服务器上也要有JS脚本了?

    91M2 TypeScript 开发环境安装指南
    文档撰写: 太太、随云
    1.Node.js 安装配置
    以下文档我们将向大家介绍在 Windows 上安装 Node.js 的方法。
    1.1下载 Node.js
    本安装教程以 node-v12.22.7-x64版本为例。
    注 : 因为node v13 以后的版本不在支持 windows 7 。 为了防止歧义,且因 91M2 开发环境仅需要依赖 typescript 编译器,更高级的版本并未带来更多的特性,所以 使用 node v12 和 node v12 后的版本对91M2开发环境,并没有区别。所以本文档以 node-v12.22.7-x64 版本作为示例
    Node.js 安装包及源码下载地址为  https://nodejs.org/zh-cn/download/
    打开下载地址能看到以上页面。点击查看所有下载项目 即可进入node.js 发行版目录浏览器 , 进行下载。
    或者是直接打开以下地址进行下载。
    https://nodejs.org/dist/v12.22.7/node-v12.22.7-x64.msi
    注 : 请勿从 非 node.js 官方站获取 node.js 安装包,以免安装到恶意程序。
    1.2 安装 Node.js
    步骤 1:双击下载后的安装包(node-v12.22.7-x64.msi)如下图所示:
    步骤2:点击以上的 Next(下一步),将出现一下界面:
    勾选接收协议选项,点击 Next(下一步) 按钮:
    步骤3: Node.js 默认安装目录为 "C:\Program Files\nodejs" ,你选择可以修改目录,并点击 Next(下一步):
    步骤4:点击树形图标来选择你需要的安装模式 ,然后点击下一步 Next(下一步)
    步骤5:下图请不要勾选
    步骤6:点击 Install(安装)开始安装 Node.js。你也可以点击 Back(返回)来修改先前的配置。
    安装过程:
    安装完成。点击 Finish(完成)按钮退出安装向导。
    以上步骤完成,我们就成功把 Node.js 成功安装到我们的 Windows 系统上了。
    我们检测下PATH环境变量是否配置了Node.js
    我们按下键盘的 win 键和 R 键,跳出以下页面。接着输入 cmd 并点击确认按键。
    检查Node.js版本 输入命令 “node -v”, 输出如下结果:
    如果你获得以上输出结果,说明你已经成功安装了Node.js

    2.Visual Studio Code 安装配置2.1 下载 Visual Studio Code
    本安装教程以 VSCodeSetup-x64-1.63.1版本为例。
    Visual Studio Code 下载地址为:https://code.visualstudio.com/download 是Microsoft(微软的产品)
    User Installer版:会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。
    System Installer版:安装在非用户目录,例如C盘根目录,任何帐户都可以使用。
    vscode 默认提供的User Installer版, 大多数人都是用的这个版本。本次教程,使用的也是该版本。
    我们点击下图所示位置选择 “64bit User Install”版本 下载
    2.2 安装 Visual Studio Code
    步骤1:双击下载后的安装包(VSCodeSetup-x64-1.63.1.exe)如下图所示:
    勾选接受协议选项,下一步按钮 :
    步骤2:选择 Visual Studio Code 的一些配置选项,这里我们全部勾选。
    选项说明:
    ①将“通过code 打开“操作添加到windows资源管理器文件上下文菜单
    ②将“通过code 打开”操作添加到windows资源管理器目录上下文菜单
    说明:①②勾选上,可以对文件、目录点击鼠标右键,选择使用 VScode 打开。
    ③将code注册为受支持的文件类型的编辑器
    说明:默认使用 VScode 打开诸如 txt,py 等文本类型的文件,一般建议不勾选(本教程选择勾选,后续需要修改某些文件的默认打开方式可以通过
    右键需要修改打开方式的文件,选择打开方式来进行修改)。
    勾选后让 VScode 支持的代码文件全部变成 VScode 默认打开,文件图标也会随之更改,很好辨认。
    ④添加到PATH(重启后生效)
    说明:这步骤默认的,勾选上,不用配置环境变量,可以直接使用。
    步骤3:确认安装选项,点击安装安妮进行 Visual Studio Code 的安装。你也可以点击上一步按钮来修改先前的配置。
    步骤4:上图点击安装后,等待自动安装  Visual Studio Code
    安装过程:

    安装完成。勾选运行  Visual Studio Code 并点击完成按钮。
    弹出以下页面,说明安装成功了。
    以上步骤完成,我们就成功把  Visual Studio Code 成功安装到我们的 Windows 系统上了。
    2.3 配置 Visual Studio Code
    根据下图操作,我们可以跳转到  Visual Studio Code 的拓展页面
    2.4 安装中文语言包
    我们在拓展页面的输入框,输入 Chinese 搜索中文语言包.
    在搜索结果处,我们找到下图所示的中文(简体)包,点击 Install 按钮进行下载。
    下载完成后。我们选择右下角的弹窗,选择 Restart 按钮重启  Visual Studio Code。(没有找到弹窗,选择直接重启  Visual Studio Code 也行)
    重启后,我们的VSCode 就是中文界面了。
    3.安装TypeScript 编译器
    我们按下键盘的 win 键和 R 键,跳出以下页面。接着输入 cmd 并点击确认按键。
    在弹出来的命令行对话框内输入






    npm install typescript@4.5.4 -g --registry=https://registry.npm.taobao.org








    等待一会就完成了安装。 接着我们输入来验证是否成功安装 typescript 编译器






    tsc -v








    如上图所示就已经完成了TypeScript 编译器的安装。
    4.使用VSCode 打开 91M2 TypeScript 脚本源码文件夹。
    打开后如图所示, 我们在VSCode 打开一个 cmd 终端用来对项目进行监视编译(当ts文件变更后自动编译)。选择终端-新建终端
      注意如果点击终端 显示的第一行为 Windows PowerShell 那么说明此刻终端是PowerShell。 我们需要先输入 cmd 并且回车,将其切换为cmd。如果不是那么不需要这一步操作。(VSCode 可以配置新建默认终端即为 cmd,自行探索本文不做详细解释)
    确认是在cmd 终端下 我们输入 tsc -w 并且回车 。就已经启动了监视编译,一旦我们修改了ts脚本源码会立即进行编译。
    5.更换编译后的js文件位置。
    我们打开脚本源码项目中的 tsconfig.json 可以看到以下内容。
    通过 修改 outDir字段的配置即可将脚本文件输出到想要输出到的目录。例如可以修改为






    D:/MirServer/Mir200/Script








    6.答疑问解惑6.1 运行TS脚本需要这么多工具,搭建服务器很麻烦。
    答: 引擎运行的是TS编译后生成的js文件。仅在制作版本的设备上需要安装,在运行的服务器上只需要生成后的js即可 不需要安装 node.js typescript 以及 vscode。
    6.2 脚本文件是强制输出到Mir200/Script 下吗,那我意味着服务器上也要有JS脚本了?
    答 : 引擎有两读取取JS的模式 : 磁盘模式 和 内置模式。 打开 Mir200/Project.ini 内即可看到设置 ScriptBuiltIn=0 表示使用磁盘模式,修改为  ScriptBuiltIn=1 则表示使用内置模式。磁盘模式下我们脚本从Mir200/Script/Main.js 作为入口 所以需要强制放在 Mir200/Script 下。内置模式下将从版本内读取js脚本。使用版本管理器打开版本后,会发现有一个"打包脚本到版本内" 的功能。 此功能将会把 版本文件 所在目录的Script目录打包到版本内。
    打包完成后即可使用内置模式了。


    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-11-23 11:21
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]常住居民II

    6

    主题

    125

    帖子

    934

    积分

    高级会员

    Rank: 4

    积分
    934
    发表于 2022-8-14 21:20:02 | 显示全部楼层
    操作到打开脚本文件目录之后,新建了终端,也进入了CMD,运行tsc -w命令后,不出现监视提示,出现一堆参数,不知道是为何。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-11-23 11:21
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]常住居民II

    6

    主题

    125

    帖子

    934

    积分

    高级会员

    Rank: 4

    积分
    934
    发表于 2022-8-14 21:40:59 | 显示全部楼层
    好吧,重新试了一下,成功了。不会启动监视的情况是因为打开的目录不是TS脚本目录。只要打开了正确的TS脚本目录,就会成功启动。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-5-30 10:35
  • 签到天数: 31 天

    连续签到: 1 天

    [LV.5]常住居民I

    3

    主题

    60

    帖子

    1899

    积分

    金牌会员

    Rank: 6Rank: 6

    积分
    1899
    发表于 2022-9-20 14:46:06 | 显示全部楼层
    一看就会,一做就废。
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2022-12-25 10:16
  • 签到天数: 9 天

    连续签到: 1 天

    [LV.3]偶尔看看II

    2

    主题

    14

    帖子

    86

    积分

    注册会员

    Rank: 2

    积分
    86
    发表于 2022-11-13 17:47:23 | 显示全部楼层
    czxjh 发表于 2022-8-14 21:40
    好吧,重新试了一下,成功了。不会启动监视的情况是因为打开的目录不是TS脚本目录。只要打开了正确的TS脚本 ...

    牛,解决了
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-5-26 12:15
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]偶尔看看I

    0

    主题

    10

    帖子

    41

    积分

    新手上路

    Rank: 1

    积分
    41
    发表于 2023-4-24 16:03:43 | 显示全部楼层
    大哥您好!我就想单机玩玩游戏需要安装这么多东西吗?
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|妖孽游戏素材网|91引擎爱好者

    GMT+8, 2024-3-29 18:03 , Processed in 0.094120 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表