Rails for Front-end Development: Essential Tools/

...

/

Overview of Yarn

Overview of Yarn

Learn about Yarn in this lesson.

We'll cover the following...

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

Note: You can find full documentation of how to install Yarn at their official site.

The current version of Webpacker requires Yarn 1.x. The 2.x version is not fully supported yet.

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

{
  "name": "north-by",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.12.7",
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "6.0.0-beta.6",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.1",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/styled-components": "^5.1.9",
    "animate.css": "^4.1.1",
    "autoprefixer": "^10.1.0",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "fork-ts-checker-webpack-plugin": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "postcss": "^8.2.1",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "stimulus": "^2.0.0",
    "styled-components": "^5.2.3",
    "tailwindcss": "^2.0.2",
    "typescript": "^4.1.3",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@tailwindcss/custom-forms": "^0.2.1",
    "@typescript-eslint/eslint-plugin": "*",
    "@typescript-eslint/parser": "*",
    "@webpack-cli/serve": "^1.3.1",
    "babel-plugin-styled-components": "^1.12.0",
    "eslint": "^7.16.0",
    "eslint-config-prettier": "*",
    "eslint-plugin-prettier": "*",
    "eslint-plugin-react": "^7.23.1",
    "prettier": "^2.2.1",
    "webpack-dev-server": "^3.11.2"
  },
  "babel": {
    "presets": [
      [
        "./node_modules/@rails/webpacker/package/babel/preset.js"
      ],
      [
        "@babel/preset-typescript"
      ]
    ],
    "plugins": [
      "babel-plugin-styled-components"
    ]
  },
  "browserslist": [
    "defaults"
  ],
  "scripts": {
    "eslint": "eslint '*/**/*.{js,ts,tsx}'",
    "eslint_fix": "eslint '*/**/*.{js,ts,tsx}' --fix"
  }
}

The package.json file is used to manage dependencies. If we choose to publish our code as a node module in its own right, it will also store information about our code. This is different from Ruby gems behavior, where the dependency management is in Gemfile.lock. However, if we are packaging our code, the metadata goes in a .gemspec file. You don’t have to understand metadata yet, it will only be used when you are publishing a module.

Many different kinds of information can be placed in a package.json file, but let’s start with the information in the file given above. This file was generated by Rails when Webpacker was added. A few more useful packages have also been included in this file.

Keys in package.json file

Our package.json file has six keys.

name

This is the name of the module, just like a name on a package. Rails fill this with the name of the application.

version

This is the version number as a string. Typically this uses the format major version, minor version, patch ...