workspace-metadata-webpack-plugin
Display workspace metadata on your website.
If you're creating a website that showcases packages in a monorepo that uses yarn workspaces
, this plugin will provide you with access to the workspace metadata.
Installation
npm install workspace-metadata-webpack-plugin
Usage
In a monorepo using yarn workspaces:
package.json
website/webpack.config.js
const Plugin = Plugin; moduleexports = plugins: context: path ;
website/src/index.js
; documentbodyinnerHTML = ` `;
API
options
Options
module
string
The name of the metadata module containing the metadata, used in the import/require statement. The default module name is workspace-metadata
.
context
string
The directory containing your root package.json
. Defaults to webpack's context
.
transform
(metadata: Metadata) => Promise<M> | M
This function converts metadata into an alternate object. The default implementation returns the unmodified metadata. This conversion function can be useful for the following use cases:
- when you would like to only include a subset of the metadata in your bundle in order to reduce bundle size
- when you would like to include additional metadata from outside of the
package.json
- when you would like to filter which packages are included in the metadata
For example:
const glob = ;const stringifyRequest = stringifyRequest; const transform = async { // only include a subset of the metadata from the root package.json const root = name: metadatajsonname description: metadatajsondescription let workspaces = metadataworkspaces; // only include a subset of the workspaces workspaces = workspaces; // add a list of demo file paths that exist in the workspace workspaces = await Promiseallmetadataworkspaces; // only include a subset of the metadata from the workspace package.json workspaces = metadataworkspaces); return root workspaces ;};
stringify
(metadata: M) => Promise<string> | string
This function converts metadata into a string of JavaScript source code. The default implementation uses JSON.stringify()
but there may be times when you would like to provide a custom conversion function.
For example:
Import a workspace file so you can dynamically show a demo
{ return `export default { workspaces: [] }`;}