配置WebStorm/PhpStorm将.ts文件编译为.js并输出至"js"文件夹

Question

我使用 WebStorm，我有一个如下结构的项目：

webApp
|--style
|--includes
|--ts
|--js

其中"webApp"是项目的根目录。

我想配置一个文件监视器，将"ts"文件夹中的.ts文件编译成"js"文件夹中的.js文件。

在监视器对话框中，我设置了：

"$Projectpath$/js/ --sourcemap $FileName$"

在参数字段中。

"$Projectpath$/js/$FileNameWithoutExtension$.js:$Projectpath$/js/$FileNameWithoutExtension$.js.map"

在“要刷新的输出路径”字段中。

每次编辑.ts文件时，WebStorm都会显示以下错误：

/usr/local/bin/tsc /htdocs/webapp/js/ --sourcemap test.ts

error TS6053: File '/htdocs/webapp/js/.ts' not found.

我尝试过多次更改宏以指向外部的js文件夹，但唯一能使其正常工作的方法是让默认选项，因此转译器会将.ts文件编译成一个包含.js文件和.map文件的“node”。

有没有办法实现我的目的？

- Plastic

Answer 1

以下步骤适用于Web和PHPstorm。

您是否有一个名为tsconfig.json的文件？

如果没有，请右键单击您的项目名称->新建->tsconfig.json。该文件将在您的项目根目录中创建。请保留它！

如果有，请打开该文件，应该类似于这样：

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

"并且只需添加选项：

"

"outDir": "JS_FOLDER_PATH_FROM_PROJECT_ROOT"

到"compilerOptions"键：

"compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "JS_FOLDER_PATH_FROM_PROJECT_ROOT"
 },

就是这么简单！

提示：使用IDE自动完成功能可以找到更多选项！

- Gilberto Albino

Answer 2

尝试将此作为您的参数值：

--out $ProjectFileDir$/js/$FileDirPathFromParent(ts)$$FileNameWithoutExtension$.js $FileName$

来源：https://www.youtube.com/watch?v=YwBWByAR8ug

- dug

Answer 3

--out选项将使tsc将所有文件合并为$FileNameWithoutExtension$.js。

如果您想生成单独的.js文件，请尝试以下设置：

Arguments: --sourcemap --outDir $ProjectFileDir$/js/$FileDirPathFromParent(ts)$ $FileName$
Output paths: $ProjectFileDir$/js/$FileDirPathFromParent(ts)$$FileNameWithoutExtension$.js:$ProjectFileDir$/js/$FileDirPathFromParent(ts)$$FileNameWithoutExtension$.js.map

- lena