Plastic Plastic - 3 months ago 32
Javascript Question

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

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?

Answer

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