https://github.com/bmpickford/npm-workspaces-example
Full working example for npm 7+ workspaces
https://github.com/bmpickford/npm-workspaces-example
monorepo npm npm-workspaces workspaces
Last synced: 24 days ago
JSON representation
Full working example for npm 7+ workspaces
- Host: GitHub
- URL: https://github.com/bmpickford/npm-workspaces-example
- Owner: bmpickford
- Created: 2022-01-02T07:20:21.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-02T11:25:36.000Z (over 4 years ago)
- Last Synced: 2025-03-15T06:42:51.771Z (about 1 year ago)
- Topics: monorepo, npm, npm-workspaces, workspaces
- Language: JavaScript
- Homepage:
- Size: 1.04 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# npm 7+ workspaces monorepo example
A simple monorepo template using es modules and npm workspaces. It contains 3 very simple modules, one containing a list of names, one exporting a function to select a random item from those names, and one containing a web component that displays that name.
## Structure
```bash
|-example/ # Directory containing example project
|-docs/ # Auto generated docs from typedoc
|-packages/ # Library specific sub packages
```
### Packages
A few different packages have been used to test and showcase different options.
#### names
List of names using default export
#### function
Exported function for random name generator as a named export
#### element
[Lit](https://lit.dev/) Web Component
## Dependencies
* [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces/)
* [eslint](https://eslint.org/)
* [mocha](https://mochajs.org/)/[chai](https://www.chaijs.com/)
* [husky](https://typicode.github.io/husky/#/)
* [vite](https://vitejs.dev/) for building / dev server for the example
* [typedoc](https://typedoc.org/) for docs. See [example](https://bmpickford.github.io/npm-workspaces-example/modules.html) output
## How to
#### Add another package
Add another folder under the packages directory and run `npm init`. Add the following options to the newly created `package.json`; `"type", "module", "main", "exports"`. It is also recommeded that the other fields present in the existing packages are also added, but are optional.
#### Use a framework like react for one of the workspaces
Add the dependencies to the sub package, then run `npm install` in the root directory.
#### Publish
Ensure non publishable packages and libraries are marked with `"private": true`. This will ensure they are not published
`npm publish --ws`
#### Use Typescript
Create your tsconfig and source files, then update the `package.json` `"main"` and `"types"` fields, and optionally add `"files"` if the compiled js is outputted in another directory.