Skip to content

Commit

Permalink
fix: fix ext mod id and add doc for not-yet-installed dep (#34)
Browse files Browse the repository at this point in the history
* Fix external module id

* Add doc for not-yet-installed deps
  • Loading branch information
licg9999 committed Jan 6, 2023
1 parent acc2cc7 commit 4fad0e8
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 6 deletions.
17 changes: 16 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ Given `{ "exports": { "import": "index.mjs", "require": "index.cjs" } }` in `pac

## Known limits

**<a name="known-limit-01" href="#known-limit-01">01:</a>** Can't handle circular dependencies in the same way as NodeJS.
**<a name="known-limit-01" href="#known-limit-01">01:</a>** _Can't handle circular dependencies in the same way as NodeJS._

In NodeJS, top-level logics in a file run exactly at the time when it's required, which makes circular dependencies possible to work. Take an example of files `a.js` and `b.js`:

Expand Down Expand Up @@ -174,6 +174,21 @@ Though, for a webpack generated file, the real exporting is always done in the e

Making circular dependencies is a bad practice. But you might have to face them if using some libs that are popular but maintained since the early releases of NodeJS, like [jsdom](https://github.com/jsdom/jsdom). When this happens, please use the [externals](https://webpack.js.org/configuration/externals/) to leave the libs untouched.

**<a name="known-limit-02" href="#known-limit-02">02:</a>** _Can't conditionally import not-yet-installed dependencies._

Webpack always detects and resolves import statements regardless of whether they run conditionally. Logics as below end up with the conditionally imported dependency `colorette` resolved:

```js
function print(message, color) {
if (typeof color === 'string') {
message = require('colorette')[color](message);
}
console.log(message);
}
```

Besides, conditionally importing any not-yet-installed dependency causes the compile-time error of `Module not found` in webpack. As a result, either, you need to make sure the conditionally imported dependency installed. Or, use the [externals](https://webpack.js.org/configuration/externals/) to leave it untouched.

## Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.
Expand Down
8 changes: 4 additions & 4 deletions src/TranspileExternalModule.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { ExternalModule } from './peers/webpack';

export class TranspileExternalModule extends ExternalModule {
resourcePath: string;
originPath: string;

constructor(request: string, type: string, resourcePath: string) {
constructor(request: string, type: string, originPath: string) {
super(request, type, request);
this.resourcePath = resourcePath;
this.originPath = originPath;
}

identifier() {
return `external ${this.externalType} ${this.resourcePath}`;
return `${super.identifier()} (${this.originPath})`;
}
}
2 changes: 1 addition & 1 deletion src/TranspileWebpackPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ export class TranspileWebpackPlugin {
const extModCandidate = new TranspileExternalModule(
request,
externalModuleTypeCjs,
childResourcePath
entryResourcePath
);
let extMod = compilation.getModule(extModCandidate);
let doesExtModNeedBuild = false;
Expand Down

0 comments on commit 4fad0e8

Please sign in to comment.