Modern Front-end Development for Rails/

...

/

Yarn

Yarn

Learn about Yarn in this lesson.

We'll cover the following...

Yarn manages dependencies through a file named package.json—it uses the same format for package.json as the Node Package Manager (npm) uses.

I’m not going to go over the fine details of installing Yarn on your system; you can find full documentation at the official site, except to say that the current version of Webpacker requires Yarn 1.x. The 2.x version is not supported yet.

Let’s take a look at our code to see what a package.json file looks like at this point:

Press + to interact
{
  "name": "nxns",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "*",
    "@babel/preset-typescript": "*",
    "@rails/actioncable": "*",
    "@rails/activestorage": "*",
    "@rails/ujs": "*",
    "@rails/webpacker": "*",
    "@types/react": "*",
    "@types/react-dom": "*",
    "@types/styled-components": "*",
    "babel-plugin-transform-react-remove-prop-types": "*",
    "bulma": "*",
    "prop-types": "*",
    "react": "*",
    "react-dom": "*",
    "stimulus":
      "https://github.com/stimulusjs/dev-builds/archive/b8cc8c4/stimulus.tar.gz",
    "styled-components": "*",
    "turbolinks": "*",
    "typescript": "*"
  },
  "version": "*",
  "devDependencies": {
    "@types/webpack-env": "*",
    "@typescript-eslint/eslint-plugin": "*",
    "@typescript-eslint/parser": "*",
    "babel-plugin-styled-components": "*",
    "eslint": "*",
    "eslint-config-prettier": "*",
    "eslint-plugin-prettier": "*",
    "eslint-plugin-react": "*",
    "prettier": "*",
    "webpack-dev-server": "*"
  },
  "scripts": {
    "eslint": "eslint '*/**/*.{js,ts,tsx}'",
    "eslint_fix": "eslint '*/**/*.{js,ts,tsx}' --fix"
  }
}

The package.json file is used both to manage dependencies. If you choose to publish your code as a node module in its own right, it will also store information about your code. This is different from Ruby gems behavior, where the dependency management is in Gemfile.lock, but if you are packaging your code, the metadata goes in a .gemspec file. We’re not going to talk about the metadata that is only used when publishing a module.

A lot of different kinds of information can be placed in a package.json file, but let’s start with the information in the file we already have. This file was generated by Rails when we added Webpacker, and we’ve added a few more modules to it as we’ve moved forward. Our package.json file has six keys:

name

The name of the module, assuming we are going to package it. Rails fills this with the name of the application.

version

...