4

I use WebStorm and I have a project with the following structure:

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

Where "webApp" is the project's root.

I'd like to configure a File Watcher that compile the .ts file within the "ts" folder into .js files within the "js" folder.

In the watcher dialog I set:

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

in the arguments field and

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

in the Output paths to refresh field.

every time I edit a .ts file webstorm shows an error like this:

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

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

I tried several time to change the macros to point to the external js folder but the only way in witch it worked was letting the default option thus the transpiler compile the .ts file that became a 'node' witch contain the .js file and the .map file.

Is there a way to accomplish my purpose?

4

3 回答 3

1

试试这个作为你的参数值：

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

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

于 2014-10-24T15:31:04.763 回答
1

--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
于 2014-10-24T16:15:50.227 回答
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 自动完成功能可以找到更多选项！

于 2016-08-23T20:22:57.053 回答