https://github.com/entrptaher/monorepo-example-lerna-parcel-mobx

Yarn workspaces, lerna, monorepo, parcel, mobx, experimental decorators and so on.
https://github.com/entrptaher/monorepo-example-lerna-parcel-mobx

Last synced: about 6 hours ago
JSON representation

Yarn workspaces, lerna, monorepo, parcel, mobx, experimental decorators and so on.

• Host: GitHub
• URL: https://github.com/entrptaher/monorepo-example-lerna-parcel-mobx
• Owner: entrptaher
• Created: 2019-07-28T17:02:29.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T05:37:05.000Z (almost 2 years ago)
• Last Synced: 2024-05-28T16:17:01.512Z (6 months ago)
• Language: JavaScript
• Size: 1.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Monorepo Example

Example of showing lerna monorepo with parcel. Managed with yarn workspaces. This also shows the experimental decorators and relative path.

![](https://i.imgur.com/l6UEvsj.png)

## Getting Started

The package uses yarn to bootstrap. The another-component is the main component for the example, however react-mobx is standalone as well. That's why you will find two .babelrc in different folders. 

You can install all packages with either yarn or lerna. You should check package.json to see how they are constructed.

```sh

yarn install

yarn run bootstrap # runs lerna bootstrap

yarn run start # runs the start script with some lerna config

```

## Explanation

Note: You do not need `.babelrc` file on multiple folders most of the time on such monorepo. This shows how to deal with components with it's own config.

### Components

The react-mobx is marked as `"source": true` in package.json to indicate parcel that it's another component and it should use babel config from the another-component folder. The babel config on react-mobx folder **is ignored** when you run another-component. 

```json

{

  "name": "@monorepo-example/react-mobx",

  "version": "1.0.0",

  "source": true

}

```

### Relative Path

As for relative path, the following alias takes care of it in respective package. This allows us to write `src/containers/App` instead of `../../../containers/App`. There are few other path related patterns on parcel documentation on [module resolution](https://parceljs.org/module_resolution.html) page.

```json

"alias": {

    "src/**": "./$1"

}

```

Another way is to define the path specifically, 

```json

"alias": {

    "components": "./components",

    "containers": "./containers",

    "stores": "./stores"

}

```

### VSCode Intellisense

The jsconfig.json file helps vsCode understand and navigate easily.

```json

{

  "compilerOptions": {

    "baseUrl": ".",

    "paths": {

      "src/*": ["./*"]

    }

  }

}

```