humanmade / humanmade/webpack-helpers

Conflict with `externals`

Open
#42 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
29
Forks
2
PR merge metrics
No merged PRs in 30d

Description

The way `externals` are currently defined makes it impossible for to export own's library to the global `this`.

Example config:

```js
module.exports = {
// ...
name: 'myPlugin',
entry: {
components: filePath( 'assets/src/components/index.js' ),
dashboard: filePath( 'assets/src/dashboard.js' ),
preview: filePath( 'assets/src/preview.js' ),
},
output: {
library: [ 'myPlugin', '[name]' ],
libraryTarget: 'this',
path: filePath( '/assets/dist/' ),
},
resolve: {
alias: {
'@myPlugin/components': filePath( '/assets/src/components/' ),
},
},
};
```

The intention was to make the entrypoints available under `this.myPlugin` object. However, since webpack helpers [defined the externals differently](https://github.com/humanmade/webpack-helpers/blob/3b30d61e1f107dcc5006078918205d44d5959989/src/externals.js#L60), they're overriden by this config.

From [webpack docs](https://webpack.js.org/configuration/output/#expose-via-object-assignment):

> Note that not setting a output.library will cause all properties returned by the entry point to be assigned to the given object; there are no checks against existing property names.

One possible solution is to update externals definition to:
```js
[ `@wordpress/${ name }` ]: { this: [ 'wp', camelCaseDash( name ) ] }
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.