PHPStorm配置typescript自动编译

清疚 2021-11-24 01:38 628阅读 0赞

1、自行去官网安装node.js；

2、npm工具安装typescript

npm install -g typescript

查看typescript版本

tsc --version

3、打开phpstorm，新建一个目录tscTest，进入该目录，执行

tsc --init

生成一个tsconfig.json文件

![20190727134723786.png][]

![2019072713482255.png][]

4、配置js文件输出路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70][]

5、打开监听File->Settings-->Tools->File Watchers->TypeScript(没有就选Custom)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2][]

配置信息如下：

Program:C:\dev\nodejs\tsc.cmd
    Arguments:--sourcemap --target "ES5"
    Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
    Working directory:$FileDir$

[20190727134723786.png]: /images/20211122/c114c91449b74775b8f04b582a3e4810.png
[2019072713482255.png]: /images/20211122/15334c9e6bc841b7a50fbe758b7ea934.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70]: /images/20211122/7fafa81e031b4bc18e44caba7a9d21ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1]: /images/20211122/4677918b87ab40ca83ab75736894f87f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2]: /images/20211122/ca0db9701e104ff4be8d03607f7ad5b2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，628人围观）

还没有评论，来说两句吧...

相关阅读

相关 WebStorm自动编译TypeScript并发布到npm

本例中需要执行的操作 1. 编译TypeScript (tsc命令) 2. 版本自增 (npm version patch命令) 3. 只将编译好的文件发布(本例中

落日映苍穹つ/ 2024年04月01日 09:30/ 0 赞/ 104 阅读

相关 phpstorm配置文件自动上传

第一步 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

绝地灬酷狼/ 2023年07月17日 14:05/ 0 赞/ 19 阅读

相关 typescript环境安装、运行及vscode自动编译设置

typescript 环境安装安装 typescript 前要安装node.js和npm 通过npm安装，全局安装：npm install -g types

﹏ヽ暗。殇╰゛Y/ 2023年07月16日 03:50/ 0 赞/ 26 阅读

相关 TypeScript 自动编译生成 .js 文件

1. npm i -g typescript typescript 中包含 es6,es5 语法，文件是以 .ts 后缀结尾，浏览器解析不了，需要在命令行输入 `

青旅半醒/ 2023年06月06日 14:26/ 0 赞/ 3 阅读

相关 TypeScript简介及配置编译选项指南

TypeScript 简介 1. TypeScript是JavaScript的超集。 2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。 3.

梦里梦外;/ 2023年01月17日 09:30/ 0 赞/ 191 阅读

相关 TypeScript的安装、使用、自动编译的教程

初识 TypeScript 1. 初识 TypeScript TypeScript 的介绍 TypeScript 的特点总

偏执的太偏执、/ 2022年10月09日 03:16/ 0 赞/ 267 阅读

相关 idea15自动编译配置

![70][] ![70 1][] [70]: https://img-blog.csdn.net/20180413195627765?watermark/2/text/a

蔚落/ 2022年05月27日 07:24/ 0 赞/ 328 阅读

相关 Intellij IDEA配置自动编译

目前的java项目都是基于springboot框架进行开发，springboot-devtools是springboot的热加载插件，使用它可以减少浪费8-18％的开发时间在项

一时失言乱红尘/ 2022年01月25日 23:17/ 0 赞/ 405 阅读

相关 PHPStorm配置typescript自动编译

1、自行去官网安装node.js； 2、npm工具安装typescript npm install -g typescript 查看typescript版本

清疚/ 2021年11月24日 01:38/ 0 赞/ 629 阅读

相关 PhpStorm配置

文章目录准备 xdebug xdebug安装 xdebug配置 xdebug2.9及一下版本

一时失言乱红尘/ 2021年09月25日 09:08/ 0 赞/ 358 阅读