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 version
...