Question

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

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

＆＃34; webApp ＆＃34;是项目的根源。

我想配置一个文件监视器，用于在＆＃34; ts ＆＃34;中编译.ts文件。将文件夹转换为＆＃34; js ＆＃34;中的.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文件＃39;节点＆＃39; witch包含.js文件和.map文件。

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

Answer 1

尝试将此作为参数值：

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

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

Answer 2

--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

Answer 3

以下步骤适用于Web和PHPstorm。

你有一个 tsconfig.json 文件吗？

如果没有，请右键点击项目名称 - ＆gt; 新 - ＆gt;的 tsconfig.json 即可。该文件将在您的项目Root文件夹中创建。保持它！

如果是，请打开该文件，应该是这样的：

{
  "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自动完成功能查找更多选项！

配置WebStorm / PhpStorm将.ts文件编译为.js到＆＃34; js＆＃34;夹

3 个答案: