【学习笔记】使用Visual Studio Code来开发TypeScript的环境记事

时间：2022-09-21 02:52:14

这两天，用了一下TypeScript，刚开始遇到了一些问题，特别记录下。


【一，下载安装node.js】

使用node.js进行编译开发，首先需要下载准备好node.js，从官网下载安装即可。

打开cmd进行验证，输入 npm -v 应该能看到版本号。

npm -v 

【二，命令行安装 typescript】

然后就是安装 typescript 。输入命令 ： 

npm install -g typescript

其中 -g 表示安装到全局环境，以后在任何项目中都有效。

安装好后，输入以下命令，查看已安装的typescript版本号

tsc -v

如果官网版本升级了，咱想升级怎么办？

输入 以下命令：

npm update -g typescript


【三，初始化项目目录配置】

最后，就是下载vscode 现在最新是1.14.2。有个改进就是默认不需要task.js这个稍后再说干嘛用的。

下载完成后，打开软件后，在文件菜单打开一个目录。

在vscode中，打开一个目录相当于是打开了一个工程的意思。


如果是新项目，建议的步骤是先进行初始化。

在vscode中，按快捷键 ctrl+~。打开终端（CMD）输入 npm init

会显示一些问题，只需一路回车，就会在目录下创建pakage.json配置。

里面初始化只有一个name和version。先不管它。


【四，初始化typescript配置】

然后，对typescript进行初始化，执行命令：tsc --init

和上面一样，一路回车就好，可以看到创建了一个名称为tsconfig.json的配置文件。

其实这个文件自己创建也行~

至于tsconfig.json里面内容如何写，这个百度有很多了，这里就不写了，只写过程和注意的事项。


【五，安装http-server】

前几项工作完成，基本环境已经搭建完毕。

我们知道写typescript有时要用的浏览器进行预览，哪我们还需要安装一下http服务。

npm install -g http-server

这样http服务就装好了，万能的npm有没有？

如何启动？输入：http-server 回车就行了，http://localhost:8080/

如何关闭？快捷键：ctrl+c

更多使用方法和命令，可以输入 http-sever -help 来查看。


【 关于：lite-server 】

除了上面这个以外，还有另一个可推荐的是：lite-server

轻量级的仅适用于开发 的 node 服务器， 它仅支持 web app, 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时，它将自动后退页面。

安装与使用，以下是被推荐的安装lite-server的方式:

$ npm install -g lite-server --save-dev
  • 1
  • 1

--save-dev 选项，将会把安装的环境写入到pakage.json里面

在你的项目中的 package.json 文件中添加一个 “script” 入口:

# Inside package.json...
"scripts": { 
"dev": "lite-server"
 },
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

有了上面的script 入口, 你就可以通过以下命令来启动 lite-server 了:

$ npm run dev
lite-server 使用BrowserSync, 它是允许你去覆盖默认的配置，这得通过你项目里的文件 bs-config.json 或 bs-config.js 来完成

lite-server -c configs/my-bs-config.js

举例来说, 要改变端口号, 被监测的文件路径, 以及你项目的base路径, 在你项目中创建 bs-config.json 文件:

{
  "port": 8000,
  "files": ["./src/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./src" }
}


【六，在github下载项目】

当我们在github上下载其它人的项目，需要编译会遇到许多麻烦。

原因是引用和配置各不相同，我们如果需要一个一个找齐，是件困难的事情。

这时候，package.json 里面记录了一些信息。

执行 npm install 会匹配并下载安装需要的环境。

当然前提是需要别人这个配置完整且正确。


【七，使用git】

默认的vscode支持对git命令的调用，但它没有安装git程序，需要我们来单独进行安装。

到git的官网上下载 Git-2.13.3-64-bit.exe 安装后即可。


【八，使用grunt 】

在开发中，推荐使用 grunt 会帮你解决很多问题，要介绍这个grunt使用涉及的篇幅很大。

而且百度也能找到许多优秀的介绍，建议大家搜索自行了解。


【九，如何同时执行两条npm命令】

使用 concurrently 即可。
需要安装 concurrently 

npm install -g concurrently

package.json的 scripts:

"command1":"aaaaa",
"command2":"bbbbb",
"test":"concurrently \"npm run command1\" \"npm run command2\""
然后 npm test就可以同时监听 aaaaa 和 bbbbb 了.


【 十，关于 --save 和 --save-dev 的区别】

--save是对生产环境所需依赖的声明(开发应用中使用的框架，库),

--save-dev是对开发环境所需依赖的声明(构建工具，测试工具).

正常使用npm
install时，会下载dependencies和devDependencies中的模块，

当使用npm
install --production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。


这篇写了简要的记录，希望对大家有帮助！


标签：

相关文章