^{Usingmy app is also a way tosupport me:}

@uiw/babel-plugin-add-import-extension

A plugin to add extensions to import and export declarations, is very useful when you use Typescript with Babel and don't want to explicity import or export module with extensions.

Usage

npminstall @uiw/babel-plugin-add-import-extension --save-dev

Via.babelrc orbabel-loader.

{"plugins":[["@uiw/babel-plugin-add-import-extension",{"extension":"js","replace":true,"skipUnlistedExtensions":true,"observedScriptExtensions":["js","ts","jsx","tsx","mjs","cjs"]}]]}

{"plugins":[["@uiw/babel-plugin-add-import-extension",{"extension":"js"}]]}

// Input Codeimport'./';import'./main';importpngfrom'./logo.png';import{Button}from'uiw';import{Select}from'@uiw/core';export{ oneBackLevel}from'..';// Output   ↓ ↓ ↓ ↓ ↓ ↓import'./index.js';import'./main.js';import{Button}from'uiw';import{Select}from'@uiw/core';export{ oneBackLevel}from"../index.js";

Output Result

- import './';- import './main';+ import './index.js';+ import './main.js';import png from './logo.png';import { Button } from 'uiw';import { Select } from '@uiw/core';- export { oneBackLevel } from '..';+ export { oneBackLevel } from "../index.js";

Options

replace

• Default:false
• Behavior: By default, if a declaration file already has an extension, it is preserved. Extensions are added to declaration files that do not have one.

extension

• Default:js
• Behavior: Appends the specified.js extension toimport andexport declarations.

skipUnlistedExtensions

• Default:false
• Behavior: If set totrue and a declaration file has an extension that isnot included in theobservedScriptExtensions list, the file will be skipped.

observedScriptExtensions

• Default:['js', 'ts', 'jsx', 'tsx', 'mjs', 'cjs']
• Behavior: Declaration files with extensions present in this list are considered for extension replacement (based on thereplace option). Files with extensionsnot in this list will have theextension option's value appended to them.

Let's the transformation begin :)

A module import without extension:

import{ add, double}from"./lib/numbers";

will be converted to:

import{ add, double}from"./lib/numbers.js";

A module export without extension:

export{ add, double}from"./lib/numbers";

will be converted to:

export{ add, double}from"./lib/numbers.js";

If you add thereplace:true option, extensions will be overwritten like so

import{ add, double}from"./lib/numbers.ts";

will be converted to:

import{ add, double}from"./lib/numbers.js";

and

export{ add, double}from"./lib/numbers.ts";

will be converted to:

export{ add, double}from"./lib/numbers.js";

What this plugin does is to check all imported modules and if your module is not onnode_module it will consider that is a project/local module and add the choosed extension, so for node modules it don't add any extension.

Contributors

As always, thanks to our amazing contributors!

Made withgithub-action-contributors.

License

MIT ©Kenny Wong &Karl Prieb