Configure WebStorm/PhpStorm to compile .ts files to .js into "js" folder

Question

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?

dug · Answer 1 · 2014-10-24T16:46:13.890

1

Try this as your arguments value:

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

source: https://www.youtube.com/watch?v=YwBWByAR8ug

edited Oct 24 '14 at 16:46

answered Oct 24 '14 at 15:31

dug

2,275
1
18
25

score 1 · Accepted Answer · answered Oct 24 '14 at 16:15

--out option will make tsc merge all your files into $FileNameWithoutExtension$.js

If you like to have separate .js file generated, try the following settings:

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

score 1 · Answer 3 · answered Aug 23 '16 at 20:22

The steps below should work both on Web and PHPstorm.

Do you have a tsconfig.json file?

If not, right click on your Project name -> New -> tsconfig.json. That file will be created in your project Root folder. Keep it!

If yes, open that file, that should be something like this:

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

and just add the option:

"outDir": "JS_FOLDER_PATH_FROM_PROJECT_ROOT"

to "compilerOptions" key:

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

As simple as that!

TIP: Use the IDE autocompletion to find more options!

Configure WebStorm/PhpStorm to compile .ts files to .js into "js" folder

3 Answers3