I am trying to transpile a project that uses ES6 syntax and TypeScript. I have a directory structure like this:
├── .babelrc
├── src
├── index.ts
└── pitching
├── pitching.test.ts
└── pitching.ts
I would like to compile everything in src
and output into dist/
. I have tried many variations of the following command (specified in the "build"
script in package.json
):
babel ./src -d ./dist
But I always get the following output:
$ babel ./src -d ./dist
Successfully compiled 0 files with Babel (13ms).
Done in 0.32s
The result is an empty dist/
directory in my project root. I tried compiling to a single file instead of a directory, which did create a compiled file, but all the module paths referenced in the code were messed up because they were relative to the src
directory. I only mention this because to me it indicates that my babel setup is correct, though maybe I am wrong about that too.
My question is, why are my files not being transpiled, or how can I troubleshoot? The command doesn't give me any helpful output, even when I add the {"debug": true}
to the presets in my .babelrc
.
For reference, here are the babel packages and versions I am using:
"devDependencies": {
"@babel/cli": "^7.10.3",
"@babel/core": "^7.10.3",
"@babel/preset-env": "^7.10.3",
"@babel/preset-typescript": "^7.10.1",
"@types/jest": "^26.0.3",
"jest": "^26.1.0"
}
and here is my .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
You can use babel-standalone to transpile ES6 to ES5 in a browser environment. You just need to load the “babel-standalone” in your script as highlighted below and write the script you want to transpile, in script tag with type “text/babel” or “text/jsx”. Babel will automatically compile and execute the script.
Try adding the proper file extensions. The reason for this is babel/preset-typescript
needs an extra argument to transpile as expected. See documentation here.
React applications compile both ts
and tsx
files.
babel --extensions .ts,.tsx ./src -d ./dist
Plain typescript applications just use ts
files.
babel --extensions .ts ./src -d ./dist
In my case I was already using the --extensions '.ts'
flag, but still getting "Successfully compiled 0 files". I'm not sure what else is different between our setups, but for me what solved it was the solution outlined here. Once I removed the wrapping quotes around the .ts
it started working.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With