第二步：使用vscode+webpack+node.js搭建ts开发环境

 

简介

• 安装vscode，安装vscode常用插件
• 下载项目代码
• 打开Client目录，运行node_module.bat，安装依赖环境
• 运行项目

第一部分：安装vscode

• 简介

 

vscode全称Visual Studio Code是个跨平台的轻量级的代码编辑器

可网上自行下载即可

• 安装vscode，到下面这个步骤，全部打钩

 

• 安装成功后启动vscode，不出意外的话会出现提示：未找到Git......，解决办法往下看

 

 

（点击不再显示即可）

 

 

 

 

 

第二部分：安装Git

• 简介

 

Git是个代码版本控制工具（类似SVN），

vscode内置对git操作支持，因此安装完vscode后，需要安装git

 

• 安装git

过程比较简单，直接看这里https://www.cnblogs.com/ximiaomiao/p/7140456.html

3、设置vscode的git路径，git.path，注意使用反斜杠/

 

• 关闭vscode重新打开，上面的提示消失

 

• Git的使用，在此不做介绍，因为我们项目代码使用svn管理，对git感兴趣请自行研究

 

• 第三部分推荐安装几个好用的vscode插件

各种vscode插件的介绍，自己多查查资料

 

 

 

 

 

 

 

 

 

 

第三部分：安装vscode插件

• 安装对JavaScript的支持

打开vscode编辑器，出现【欢迎使用】界面，此界面上有几个推荐的插件

我们需要安装JavaScript和TypeScript支持插件

 

点击蓝色的JavaScript，出现提示，点击确定

 

界面一闪之后，在插件栏，即可看到名字为：ESLint的插件安装成功

 

 

 

 

 

 

 

 

 

 

 

• TypeScript扩展插件安装同上

安装完毕后插件栏显示如下，TSLint就是TypeScript扩展插件

 

3、安装其他插件，可以在商店搜索以下插件名字，点击安装

 

 

 

第四部分：安装webpack

• 简介

webpack是js模块化管理器，他可以直接把零散的js文件模块化

也可以通过一些依赖项把typescript文件编译为js文件，然后模块化

更多资料查网络

• 安装webpack（全局安装）

打开cmd命令行输入cnpm install webpack -g

• 安装编译typescprit所需的依赖包

打开Client目录，运行node_module.bat文件即可

• webpack的使用

有两种方式使用webpack编译和打包typescript文件

1、通过cmd命令行执行

2、通过vscode编辑器安装npm插件，配置webpack.config.js文件执行

 

 

第六部分：编译TypeScript代码

• 在Game目录上右键  【open with code】使用vscode打开Game项目，看到如下

 

• 快捷键【ctrl + shift + p】打开vscode命令行，输入【npm:start】

vscode即开始执行package.json里面配置的start项

 

可以看到我们把start项配置为webpack，因此调用到webpack.config.js文件

（此步骤需要vscode已安装npm插件）

• 在vscode终端可以看到编译、打包成功

此时我们已经把typesciprt代码通过webpack的tsloader项，编译、打包为一个js文件

 

第七部分：调试TypeScript代码

1、点击蜘蛛图标，切换到调试界面，

 

• 点击绿色调试按钮，或快捷键F5开始调试运行游戏

 

• 如果一切顺利，可以看到chome浏览器已经启动，游戏开始在chome浏览器运行，此时我们可以对typescript代码设置断点调试。

 

• 在代码行左侧点击鼠标，可以看到断点显示为红色圆点

 

• 我们发现虽然在浏览器运行的是ts编译后的js代码，但是我们仍然可以直接在原来的ts代码上打断点调试，这是因为启用了typescript编译选项的源映射功能。

我们在利用webpack编译、打包ts代码的时候，通过为webpack设定source-map-loader项，生成了js代码的ts代码源映射，把运行时的js代码映射到编译之前的ts代码，方便调试。

 

 

npm:start，启动项目时，如果出现：

 

Error: Cannot find module 'webpack'

    at Function.Module._resolveFilename (module.js:527:15)

    at Function.Module._load (module.js:476:23)

    at Module.require (module.js:568:17)

    at require (internal/module.js:11:18)

    at Object.<anonymous> (F:\WorkSpace\HBuilder\HBuilder_Workspace\WebpackWorkspace\webpack.config.js:1:77)

    at Module._compile (module.js:624:30)

    at Object.Module._extensions..js (module.js:635:10)

    at Module.load (module.js:545:32)

    at tryModuleLoad (module.js:508:12)

    at Function.Module._load (module.js:500:3)}

 

解决方法如下

 

你在CMD输入 webpack -v

（能显示出版本号，没有显示版本的 请先去环境变量 给系统变量 path 添加你 webpack的路径）

 

然后 在我的电脑  添加"系统环境"变量,(注意：是系统环境变量）

 

变量名为：NODE_PATH

 

变量值为：你的npm下的node_modules文件夹

D:\npmConfig\npm\node_modules

 

打开CMD 输入：cnpm install webpack --save-dev

 

正常来说，应该是能安排上webpack了。

 

重新打开vscode,  npm:start 项目，正常来说应该是可以编辑通过了

 

 

以上方法都不可以的时候，可以尝试一下方法：

先全局安装webpack和webpack-cli

npm install webpack -g

npm install webpack-cli -g

再局部安装webpack和webpack-cli

npm install webpack --save-dev

npm install webpack-cli --save-dev

亲测有效~