Search code examples
javascriptnode.jsbabeljstranspiler

Babel creates output directory but doesn't transpile any files


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"]
}

Solution

  • 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