@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.

[!WARNING]

This is a fork of babel-plugin-add-import-extension, mainly used to add extensions when importing files in ESM packaging. If you are using an older webpack project, not all imported resources are .js files; they might be .less, .css, .png, or other files. Adding the .js extension directly would cause errors, so we need to add a parameter to ensure that resources that already have an extension won't have the .js extension added again.

Usage

npm install @uiw/babel-plugin-add-import-extension --save-dev

Via .babelrc or babel-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 Code
import './';
import './main';
import png from './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 to import and export declarations.

skipUnlistedExtensions

• Default: false
• Behavior: If set to true and a declaration file has an extension that is not included in the observedScriptExtensions 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 the replace option). Files with extensions not in this list will have the extension 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 the replace: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 on node_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 with github-action-contributors.

License

MIT © Kenny Wong & Karl Prieb