Skip to content

Commit 3478109

Browse files
committed
docs(readme): add README
1 parent 414404e commit 3478109

File tree

1 file changed

+86
-0
lines changed

1 file changed

+86
-0
lines changed

README.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
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

Comments
 (0)