@uiw/babel-plugin-add-import-extension
Version:
Remove the specified import declaration when you use the babel transform to build the package.
170 lines (124 loc) • 5.27 kB
Markdown
@uiw/babel-plugin-add-import-extension
===
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->
[](https://npmjs.org/package/@uiw/babel-plugin-add-import-extension)
[](https://github.com/uiwjs/babel-plugin-add-import-extension/actions/workflows/ci.yml)
[](https://uiwjs.github.io/babel-plugin-add-import-extension/lcov-report)
[](https://npmjs.org/package/@uiw/babel-plugin-add-import-extension)
[](https://github.com/uiwjs/babel-plugin-add-import-extension/network/dependents)
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](https://www.npmjs.com/package/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
```bash
npm install @uiw/babel-plugin-add-import-extension --save-dev
```
Via `.babelrc` or `babel-loader`.
```json
{
"plugins": [
[
"@uiw/babel-plugin-add-import-extension", {
"extension": "js",
"replace": true,
"skipUnlistedExtensions": true,
"observedScriptExtensions": ["js", "ts", "jsx", "tsx", "mjs", "cjs"]
}
]
]
}
```
```json
{
"plugins": [
[
"@uiw/babel-plugin-add-import-extension", {
"extension": "js"
}
]
]
}
```
```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
```diff
- 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:
```js
import { add, double } from "./lib/numbers";
```
will be converted to:
```js
import { add, double } from "./lib/numbers.js";
```
A module export without extension:
```js
export { add, double } from "./lib/numbers";
```
will be converted to:
```js
export { add, double } from "./lib/numbers.js";
```
If you add the `replace:true` option, extensions will be overwritten like so
```js
import { add, double } from "./lib/numbers.ts";
```
will be converted to:
```js
import { add, double } from "./lib/numbers.js";
```
and
```js
export { add, double } from "./lib/numbers.ts";
```
will be converted to:
```js
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!
<a href="https://github.com/uiwjs/babel-plugin-add-import-extension/graphs/contributors">
<img src="https://uiwjs.github.io/babel-plugin-add-import-extension/CONTRIBUTORS.svg" />
</a>
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
[MIT](./LICENSE) © [`Kenny Wong`](https://github.com/jaywcjlove) & [`Karl Prieb`](https://codeberg.org/karl)