|
| 1 | +# resolve-typescript-plugin |
| 2 | + |
| 3 | +A webpack plugin to resolve TypeScript files imported using the `.js` extension |
| 4 | +when using ESM imports. |
| 5 | + |
| 6 | +## Why? |
| 7 | + |
| 8 | +If you are using webpack in conjunction with TypeScript and ES Modules, you need |
| 9 | +this plugin for full compliance with the ES Modules ecosystem. |
| 10 | + |
| 11 | +ES Modules require imports to specify the runtime path of the file to be |
| 12 | +imported, including file extension. For TypeScript files, this means that [you |
| 13 | +must import using the extension `.js`][1] even though the source file uses the |
| 14 | +extension `.ts` or `.tsx`. This is because TypeScript compiles to a `.js` file |
| 15 | +that will be used at runtime. |
| 16 | + |
| 17 | +However, webpack behaves differently, even when configured for ES Modules. |
| 18 | +webpack expects that files will be imported by specifying the compile-time path |
| 19 | +of the file, including the compile-time extension. For TypeScript files this |
| 20 | +will be `.ts` or `.tsx`. Alternatively, webpack expects that files will be |
| 21 | +imported with no extension, in which case webpack will resolve the extension |
| 22 | +automatically according to the [`resolve.extensions` option][2]. Neither of |
| 23 | +these behaviours is consistent with browser or node ES Module environments. |
| 24 | + |
| 25 | +This plugin extends webpack module resolution so that imports specifying a `.js` |
| 26 | +extension will resolve to the corresponding `.ts` or `.tsx` file if available, |
| 27 | +and fall back to `.js` otherwise. |
| 28 | + |
| 29 | +If you want to create ES Modules in TypeScript that are consistent between |
| 30 | +webpack, browser, and node environments, use this plugin. |
| 31 | + |
| 32 | +See [ts-loader#1110][3] for more background on this issue. |
| 33 | + |
| 34 | +## Install |
| 35 | + |
| 36 | +With npm: |
| 37 | + |
| 38 | +```bash |
| 39 | +npm install --save-dev resolve-typescript-plugin |
| 40 | +``` |
| 41 | + |
| 42 | +or yarn: |
| 43 | + |
| 44 | +```bash |
| 45 | +yarn add --dev resolve-typescript-plugin |
| 46 | +``` |
| 47 | + |
| 48 | +## Usage |
| 49 | + |
| 50 | +Configure webpack something like this: |
| 51 | + |
| 52 | +```js |
| 53 | +const ResolveTypeScriptPlugin = require("resolve-typescript-plugin").default; |
| 54 | + |
| 55 | +exports = { |
| 56 | + module: { |
| 57 | + rules: [ |
| 58 | + { |
| 59 | + test: /\.tsx?$/, |
| 60 | + use: "ts-loader" |
| 61 | + } |
| 62 | + ] |
| 63 | + }, |
| 64 | + resolve: { |
| 65 | + fullySpecfied: true, |
| 66 | + plugins: [new ResolveTypeScriptPlugin()] |
| 67 | + } |
| 68 | +}; |
| 69 | +``` |
| 70 | + |
| 71 | +You will also need to have [ts-loader][4] (or another TypeScript loader) |
| 72 | +installed and configured. |
| 73 | + |
| 74 | +## Feedback |
| 75 | + |
| 76 | +We're seeking [community feedback][5] on this plugin. |
| 77 | + |
| 78 | +Please report bugs, problems, and missing features on the [GitHub Issue |
| 79 | +Tracker][6]. |
| 80 | + |
| 81 | +[1]: https://github.com/microsoft/TypeScript/issues/16577#issuecomment-703190339 |
| 82 | +[2]: https://github.com/TypeStrong/ts-loader/issues/1110 |
| 83 | +[3]: https://webpack.js.org/configuration/resolve/#resolveextensions |
| 84 | +[4]: https://www.npmjs.com/package/ts-loader |
| 85 | +[5]: https://github.com/softwareventures/resolve-typescript-plugin/issues/5 |
| 86 | +[6]: https://github.com/softwareventures/resolve-typescript-plugin/issues |
0 commit comments