【学习笔记】使用Visual Studio Code来开发TypeScript的环境记事
2017-07-27 11:41
1091 查看
这两天,用了一下TypeScript,刚开始遇到了一些问题,特别记录下。
【一,下载安装node.js】
使用node.js进行编译开发,首先需要下载准备好node.js,从官网下载安装即可。
打开cmd进行验证,输入 npm -v 应该能看到版本号。
【二,命令行安装 typescript】
然后就是安装 typescript 。输入命令 :
其中 -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服务。
这样http服务就装好了,万能的npm有没有?
如何启动?输入:http-server 回车就行了,http://localhost:8080/
如何关闭?快捷键:ctrl+c
更多使用方法和命令,可以输入 http-sever -help 来查看。
【 关于:lite-server 】
除了上面这个以外,还有另一个可推荐的是:lite-server
轻量级的仅适用于开发 的 node 服务器, 它仅支持 web app, 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时,它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时,它将自动后退页面。
1
--save-dev 选项,将会把安装的环境写入到pakage.json里面
在你的项目中的
2
3
4
1
2
3
4
有了上面的script 入口, 你就可以通过以下命令来启动
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
package.json的 scripts:
【 十,关于 --save 和 --save-dev 的区别】
正常使用
当使用
这篇写了简要的记录,希望对大家有帮助!
【一,下载安装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-dev1
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 devlite-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中的模块。
这篇写了简要的记录,希望对大家有帮助!
相关文章推荐
- 如何使用vscode [Visual Studio Code]开发工具来搭建一套TypeScript的开发环境
- 使用Visual Studio Code + Node.js搭建TypeScript开发环境
- 使用Visual Studio Code搭建TypeScript开发环境
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(六)-- 依赖注入
- 《算法4》 Windows/Mac环境下使用Visual Studio Code和Orcale JDK1.8开发环境搭建
- 打造TypeScript的Visual Studio Code开发环境
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(八)-- 多环境开发
- 【学习笔记】熟悉使用Visual Studio Code的快捷键
- 【学习笔记】在VSCode上配置typescript + nodejs 开发环境
- Nodejs创建Express4项目以及使用Visual Studio Code编辑器配置Nodejs开发环境
- TypeScript开发环境搭建-Visual Studio Code
- 使用Visual Studio Code和typescript 开发调试React Native项目
- Windows下visual studio code搭建golang开发环境
- 在团队开发环境中使用 Visual Studio.NET
- 在Visual Studio Code中配置GO开发环境
- 为visual studio code配置go开发环境(windows)
- 在团队开发环境中使用 Visual Studio .NET (二)
- 初试Visual Studio Code配置Python开发环境
- 在Visual Studio Code中配置GO开发环境