Let's start with Yarn 2 workspaces

Stepan Vanzuriak — Wed, 22 Jul 2020 06:18:27 +0000

Photo by Paul Hanaoka on Unsplash

A couple of days ago I found it quite difficult to figure out how to use yarn 2 and workspaces and spend hours searching for an explanation. This post is an attempt to fill the gap between docs and real-life example.

Yarn 2 is different package manager then "classic" first version and workspaces were improved with behaviour and commands (more about new features here https://dev.to/arcanis/introducing-yarn-2-4eh1).

What's workspaces?

From docs

The Yarn workspaces aim to make working with monorepos easy, solving one of the main use cases for yarn link in a more declarative way. In short, they allow multiple of your projects to live together in the same repository AND to cross-reference each other - any modification to one's source code being instantly applied to the others.

So it's a mechanism to manage your monorepos, or if simple, if your project structure similar to this you may found this useful:

\project-root
 \folder-a
    package.json
 \folder-b
    package.json
 ...
 package.json

Initialize project

Let's define a new project with yarn 2

$ mkdir hello-yarn-worspaces
$ cd ./hello-yarn-worspaces

Let's init yarn here

$ yarn init -y

Note: Use -y flag to skip questions about package name, version, author, etc.

Now your root package.json file should look like this

{
  "name": "hello-yarn-worspaces",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Next step is to check if yarn installed in the system, running yarn -v in your terminal app should show system version, if you not sure read install part of docs https://yarnpkg.com/getting-started/install

To set yarn 2 as a package manager for the current project you need run two commands in your project root:

$ yarn policies set-version berry
$ yarn set version berry

Now you ready to define your sub-packages. Lets create package-a folder and package-b folder.

Our structure now looks like this:

\hello-yarn-workspaces
    \package-a
    \package-b
package.json

Let’s run yarn init -y for both folders, let’s look again to our structure

\hello-yarn-worspaces
    \package-a
     package.json
    \package-b
     package.json
package.json

Simple code example

We need two files, one index.js to package-a and another index.js to package-b

package-b/index.js

function b() {
  return "From b. You made it!";
}

module.exports = b;

package-a/index.js

const b = require("package-b");

console.log(b());

Our simple code it’s just idea to visualize linking two packages.

Let's link package-b as dependencies for package-a:

package-a/package.json

{
  "name": "package-a",
  "dependencies": {
    "package-b": "workspace:package-b"
  }
}

After run yarn command into the root folder.

As final we should run package-a/index.js, yarn uses non-classic linking via .pnp.js so to run it we need to replace node ./package-a/index.js command with yarn node ./package-a/index.js (or add “start”: “node index.js” to package-a/package.json)

If everything correct output will be

From b. You made it!

Conclusion

Yarn 2 workspaces great for multipackage repositories, follow this tutorial and you will able create own simple workspace.

DEV Community: Stepan Vanzuriak

Let's start with Yarn 2 workspaces

What's workspaces?

Initialize project

Simple code example

Conclusion