Develop Reference

Babel CLI have outdir be relative to transpile dir

First of all thanks for trying to help me. I'll get straight into it.
I'm trying to transpile Typescript files to JS files. These typescript files are scattered throughout a directory (all modules follow the same file structure)
The package.json command is:
"build:js": "babel app/code/VendorName/**/view/adminhtml/web/ts --out-dir js --extensions \".ts,.tsx\" --source-maps inline"
All of the typescript files reside in different folders within VendorName (notice the **). Within it through the typescript files are in view/adminhtml/web/ts, always.
I would like to transpile all of these files and put them in their respective modules' js folders which are in:
app/code/VendorName/**/view/adminhtml/web/js. Meaning literally next to the ts folder. How can I make it, so that the --out-dir is relative to the directory that I'm transpiling? Is that even possible? Otherwise I'll have to setup a config for each and every single module I'm developing, which would be a bit of a nuisance.

The correct answer is adding the --relative flag. Position is very important "babel --verbose app/code/VenderName/**/view/adminhtml/web/ts --ignore \"**/*.d.ts\" --relative --out-dir ../js --extensions \".ts\" --source-maps inline"

Does the `tsc` command accept .d.ts files?

I have a .d.ts file, and would like to compile it down to a .js file. Is this possible using the tsc command?
I know that the tsc command can take any .ts file and then compile it down .js file (I have tested this). However, I couldn't get it to take a .d.ts file as an input since it did not output any .js file for me.
I have tried to play around with tsconfig.json and this how my file looks like at the moment:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "ali_output_javascript"
}
}
I also know the following about .d.ts and .ts files. Typescript declaration files (.d.ts) describe the shape of a JavaScript file. It allows you to use existing JavaScript code in TypeScript without having to write all the code in TypeScript. Typescript files (.ts) is just the standard file extension when writing in typescript.
From this medium article (https://medium.com/jspoint/typescript-compilation-the-typescript-compiler-4cb15f7244bc), it does say that TypeScript compilation looks for file extensions .ts and .d.ts:
Normally, you would use files or include option and provide file paths or glob patterns to include TypeScript files in the compilation process. However, you can drop the .ts extension from the glob pattern and let the TypeScript compiler search for the input files.
When a glob pattern doesn’t have a file extension, TypeScript looks for the files ending with .ts or .d.ts extension in the directory pointed by the glob pattern. The .d.ts file is a TypeScript declaration file, we have discussed this file type in the Declaration Files lesson (coming soon). When the allowJS compiler-option is set to true, the TypeScript will also search for .js files as well.
Please let me know if you any suggestions, and thank you for your time.

You misunderstood what .d.ts files are.
They are not supposed to be transpiled into .js files, .ts files are supposed to be transpiled into .js files and .d.ts files for strong typing in a JavaScript IDE, or for further use into a TypeScript project.
Also, .d.ts are not executable and cannot produce executable files as they are just empty shells with types, which is also know as ambient declaration, in TypeScript terms, which means "without implementation".

Compiling js directories & node modules into single js file

So I have a question, I'm looking into compiling all of my .js files along with the node modules also into one single .js file.
I currently have all of my import statements inside main.js, and then I have my babel script using the following: "js-build": "babel js --out-file js/all.js --ignore js/main/main.js", that takes all the imports from main.js and compiles it to all.js.
Problem:
It doesn't overwrite the files and I can't import node_modules, does someone have any recommendations on traditional ways to use npm to compile js files? Do you recommend things such as webpack? I'd like to stay away from gulp.

i can do it by remove
exclude: /node_modules/

How to map compiled JS errors trace to Typescript code?

In my project, I have an /src folder that contains .ts files and I setup tsconfig.json to compile those in a folder called /dist into .js and source map .js.map.
Now I run the code using the commande node /dist/whatever.js
But Let's say there in a error. The error logs maps to the compiled .js files.
How to make it map to the original .ts file ? I assume this is possible because that's the use of source map.

Happened to see this question. I didn't really use IntelliJ, but I have been using source-map-support to do the trick. You could either programmtically add import 'source-map-support/register';, or invoke node CLI node -r source-map-support/register compiled.js. Hope that helps.

I see you are using IntelliJ. You can exclude directories so they will not be indexed.

Bundling separate CSS with Webpack

I've got Webpack working with style-loader and sass-loader, but can't figure one thing out:
I have two separate "stylesheet" bundles (our normal app, and a custom-skin version for a client). If I require them in separately, it'll still get output as 1 file (bundle.css). I also tried setting the sass source files as entry points, but that gave me this error:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /Users/slangbroek/Projects/app-name/app/src/styles/mobile/mobile in /Users/slangbroek/Projects/app-name/app/src
for both stylesheet-entrypoints. Does anybody have any idea how to accomplish this with Webpack?

You could use two .js entrypoints, one for the normal app and one for the custom-skinned version. If the only difference in these were the stylesheets, you may want to have 3 entrypoints, one for the app .js that both projects consume, and an entrypoint for each .scss file. All those entrypoint files would do is require the stylesheets.
Its pretty bizarre, but I believe that'd be the only pure webpack solution. Of course, you could consider using webpack in conjunction with gulp/grunt/etc, and use the task runner to bundle with webpack and compile your scss files as well.