• WebStorm自动编译TypeScript


    默认情况,WebStorm是提供了创建TypeScript的模版文件,但是不提供自动编译ts文件为js和map文件。 网上找的一些教程,主要是教大家额外配置一个File Watcher来对ts文件进行自动编译。后来我发现新版本的WebStorm已经提供自动编译的功能了,只是需要设置一下。

    1. WebStorm自带配置自动编译TypeScript功能 通过 File – Settings,调出 Settings界面,然后选择以下的界面即可配置:

    img

    他默认Compile那里的Enable TypeScript Compiler是没有打勾的,所以打上勾就可以了。 打勾后默认是使用选择 Use tsconfig.json的设置方式的。所以你还得增加一份tsconfig.json配置文件。 WebStorm也是提供了模版,直接新建,选择创建 tsconfig.json File即可。

    img

     

    tsconfig.json的默认信息:

     {
      "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true
      },
      "exclude": [
        "node_modules"
      ]
     }

    具体的参数信息,可以考虑这里:https://www.tslang.cn/docs/handbook/tsconfig-json.html 如果不想使用tsconfig.json的话,那么可以直接使用WebStorm内置的参数选项,也就是旁边的 Set options manually 我个人推荐是使用是tsconfig.json,毕竟方便自由,只要熟悉了配置信息,就好多了,而且egret和laya都是使用tsconfig.json的。

      1. 通过File Watcher来自动编译TypeScript 这个就是网上介绍比较多的方式,我自己也是测试过,也是一样是可以的,这个有点像Set options manually的方式,参数什么的需要自己配置。根据个人喜好了。一些参数的简要说明:

     Program:C:\Users\[username]\AppData\Roaming\npm\tsc.cmd

    注意,这个安装了nodejs之后就会有,请按照自己实际的用户名

     Arguments:--sourcemap --target "ES5"
     Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
     Working directory:$FileDir$

    img

     

    其实参数之后配置,还可以根据自己的实际情况,配置不同的目录,比如编译后输出到bin-debug目录。

     

     
     

  • 相关阅读:
    自定义控件其实很简单5/12
    自定义控件其实很简单1/3
    自定义控件其实很简单1/4
    自定义控件其实很简单1/6
    ListView addfooter 没显示 footer的原因(之一)
    android 版本和 api level 的对应关系
    derby入门
    OA系统与ERP的区别
    Windows下的定时任务
    linux学习笔记——安装问题
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/15544938.html
Copyright © 2020-2023  润新知