Skip to content

Commit

Permalink
Add docs for TS preset's rewriteImportExtensions (#2825)
Browse files Browse the repository at this point in the history
  • Loading branch information
nicolo-ribaudo committed Sep 25, 2023
1 parent 6ffbf2f commit c81c6cf
Showing 1 changed file with 58 additions and 0 deletions.
58 changes: 58 additions & 0 deletions docs/preset-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,3 +166,61 @@ export var Animals = {
```

> You can read more about configuring preset options [here](https://babeljs.io/docs/en/presets#preset-options).
### `rewriteImportExtensions`

`boolean`, defaults to `false`

Added in: `v7.23.0`

When set to `true`, Babel will rewrite `.ts`/`.mts`/`.cts` extensions in import declarations to `.js`/`.mjs`/`.cjs`.

This option, when used together with TypeScript's [`allowImportingTsExtension`](https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions) option, allows to write complete relative specifiers in import declaratoinss while using the same extension used by the source files.

As an example, given this project structure (where `src` contains the source files, and `dist` the compiled files):
```
.
├── src
│ ├── main.ts
│ └── dep.ts
├── dist
│ ├── main.js
│ └── dep.js
├── babel.config.json
└── tsconfig.json
```

and with the following configuration files:
<table>
<tr><th>babel.config.json</th><th>tsconfig.json</th></tr>
<tr><td>

```json
{
"presets": [
["@babel/preset-typescript", {
"rewriteImportExtensions": true
}]
]
}
```

</td><td>

```json
{
"compilerOptions": {
"lib": ["esnext"],
"noEmit": true,
"isolatedModules": true,
"moduleResolution": "nodenext",
"allowImportingTsExtensions": true
}
}

```

</td></tr>
</table>

you will be able to write `import x from "./dep.ts"` in `main.ts`, and Babel will transform it to `import x from "./dep.js"` when compiling `main.ts` to `main.js`.

0 comments on commit c81c6cf

Please sign in to comment.