|
| 1 | +@uiw/babel-plugin-add-import-extension |
| 2 | +=== |
| 3 | +<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;--> |
| 4 | + |
| 5 | +[](https://npmjs.org/package/@uiw/babel-plugin-add-import-extension) |
| 6 | +[](https://github.com/uiwjs/babel-plugin-add-import-extension/actions/workflows/ci.yml) |
| 7 | +[](https://uiwjs.github.io/babel-plugin-add-import-extension/lcov-report) |
| 8 | +[](https://npmjs.org/package/babel-plugin-add-import-extension) |
| 9 | +[](https://github.com/uiwjs/babel-plugin-add-import-extension/network/dependents) |
| 10 | + |
| 11 | +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. |
| 12 | + |
| 13 | +> [!WARNING] |
| 14 | +> |
| 15 | +> 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. |
| 16 | +
|
| 17 | +## Usage |
| 18 | + |
| 19 | +```bash |
| 20 | +npm install @uiw/babel-plugin-add-import-extension --save-dev |
| 21 | +``` |
| 22 | + |
| 23 | +Via `.babelrc` or `babel-loader`. |
| 24 | + |
| 25 | +```json |
| 26 | +{ |
| 27 | + "plugins": [ |
| 28 | + [ |
| 29 | + "@uiw/babel-plugin-add-import-extension", { |
| 30 | + // Add .js extension to all imports and exports |
| 31 | + "extension": "js", |
| 32 | + // Control with a boolean value, default to not processing files that already have an extension |
| 33 | + "skipExistingExtensions": true, |
| 34 | + } |
| 35 | + ] |
| 36 | + ] |
| 37 | +} |
| 38 | +``` |
| 39 | + |
| 40 | +```js |
| 41 | +// Input Code |
| 42 | +import './'; |
| 43 | +import './main'; |
| 44 | +import { Button } from 'uiw'; |
| 45 | +import { Select } from '@uiw/core'; |
| 46 | + |
| 47 | +// Output ↓ ↓ ↓ ↓ ↓ ↓ |
| 48 | +import './index.js'; |
| 49 | +import './main.js'; |
| 50 | +import { Button } from 'uiw'; |
| 51 | +import { Select } from '@uiw/core'; |
| 52 | +``` |
| 53 | + |
| 54 | +Output Result |
| 55 | + |
| 56 | +```diff |
| 57 | +- import './'; |
| 58 | +- import './main'; |
| 59 | ++ import './index.js'; |
| 60 | ++ import './main.js'; |
| 61 | +import { Button } from 'uiw'; |
| 62 | +import { Select } from '@uiw/core'; |
| 63 | +``` |
| 64 | + |
| 65 | +## Options |
| 66 | + |
| 67 | +### `replace` |
| 68 | + |
| 69 | +* **Default:** `false` |
| 70 | +* **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. |
| 71 | + |
| 72 | +### `extension` |
| 73 | + |
| 74 | +* **Default:** `js` |
| 75 | +* **Behavior:** Appends the specified `.js` extension to `import` and `export` declarations. |
| 76 | + |
| 77 | +### `skipUnlistedExtensions` |
| 78 | + |
| 79 | +* **Default:** `false` |
| 80 | +* **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. |
| 81 | + |
| 82 | +### `observedScriptExtensions` |
| 83 | + |
| 84 | +* **Default:** `['js', 'ts', 'jsx', 'tsx', 'mjs', 'cjs']` |
| 85 | +* **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. |
| 86 | + |
| 87 | +## Let's the transformation begin :) |
| 88 | + |
| 89 | +A module import without extension: |
| 90 | + |
| 91 | +```js |
| 92 | +import { add, double } from "./lib/numbers"; |
| 93 | +``` |
| 94 | + |
| 95 | +will be converted to: |
| 96 | + |
| 97 | +```js |
| 98 | +import { add, double } from "./lib/numbers.js"; |
| 99 | +``` |
| 100 | + |
| 101 | +A module export without extension: |
| 102 | + |
| 103 | +```js |
| 104 | +export { add, double } from "./lib/numbers"; |
| 105 | +``` |
| 106 | + |
| 107 | +will be converted to: |
| 108 | + |
| 109 | +```js |
| 110 | +export { add, double } from "./lib/numbers.js"; |
| 111 | +``` |
| 112 | + |
| 113 | +If you add the `replace:true` option, extensions will be overwritten like so |
| 114 | + |
| 115 | +```js |
| 116 | +import { add, double } from "./lib/numbers.ts"; |
| 117 | +``` |
| 118 | + |
| 119 | +will be converted to: |
| 120 | + |
| 121 | +```js |
| 122 | +import { add, double } from "./lib/numbers.js"; |
| 123 | +``` |
| 124 | + |
| 125 | +and |
| 126 | + |
| 127 | +```js |
| 128 | +export { add, double } from "./lib/numbers.ts"; |
| 129 | +``` |
| 130 | + |
| 131 | +will be converted to: |
| 132 | + |
| 133 | +```js |
| 134 | +export { add, double } from "./lib/numbers.js"; |
| 135 | +``` |
| 136 | + |
| 137 | +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. |
| 138 | + |
| 139 | +## Contributors |
| 140 | + |
| 141 | +As always, thanks to our amazing contributors! |
| 142 | + |
| 143 | +<a href="https://github.com/uiwjs/babel-plugin-transform-remove-imports/graphs/contributors"> |
| 144 | + <img src="https://uiwjs.github.io/babel-plugin-transform-remove-imports/CONTRIBUTORS.svg" /> |
| 145 | +</a> |
| 146 | + |
| 147 | +Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). |
| 148 | + |
| 149 | +## License |
| 150 | + |
| 151 | +[MIT](./LICENSE) © [`Kenny Wong`](https://github.com/jaywcjlove) & [`Karl Prieb`](https://codeberg.org/karl) |
0 commit comments