Babel CLI have outdir be relative to transpile dir - javascript

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"

Related

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/

package.json - pathname pattern for .ts .tsx .js .jsx

I am trying to write a npm script that goes trought all of my src files and tests (lints) files that end in either .ts .tsx .js or .jsx. So the linter should test all of these (and only these).
What I have so far:
"lint": "eslint --max-warnings 0 --ext .js \"src/**/*.ts*\""
Does this test both .ts and .tsx files?
How do I write a pattern for multiple file types?
You could do it like this:
"lint": "eslint --max-warnings 0 --ext .js \"src/**/*.{ts,tsx}\""
As can be seen Here
As far as I know, that is the only way to handle multiple file extensions. When using a asteriks, i get the feedback "The system cannot find the path specified."

babel does not inject relative requires into the output

I run babel against my source files, i want to output one single file, with all the relative imports injected inside the file.
Source structure
src
│ index.js
│ relative-file.js
│
└───some-folder
another-relative-file.js
the index file requires relative-file, and the relative-file requires another-relative-file.
Expected output
index.js with no relative requires, everything is injected inside this one file.
Actual output
index.js with require('./relative-file') inside.
Tried babel-cli commands
babel src --out-file distribution/index.js
output a dir will put output multiple files requiring each other just like the source.
babel src --out-dir distribution
I don't think babel helps with eliminating requires. You need to use a bundler like webpack in combination with babel to achieve what you want.

Specify Compile Order in Babel

I have my React components broken up into separate JS files for manageability and using the following command to compile the files in my src folder into a single JavaScript file:
babel -w src -o scripts.js
My problem is the order in which the files are compiling. I want to make certain that the base file containing my render() function is last and that a file containing 'use strict;' is first.
Is there a way to tell Babel the order of files to process?
Thanks!
-Eric

Exclude file in npm scripts

I've been hunting around on stackoverflow but I can't find a method to exclude a file from being included in the linter script I have. I am trying to exclude the karma.conf.js file:
"lint": "node_modules/eslint/bin/eslint.js --ext=.js client/ lib/ models/ routes/ test/backend/ *.js !karma.conf.js"
I've tried using: -I, --exclude='karma.conf.js', --ignore=karma.conf.js and a few others, but no luck. Any advice?

Categories

Resources