![]() Npm WARN requires a peer of but none was installed. ├── UNMET PEER DEPENDENCY UNMET PEER DEPENDENCY UNMET PEER DEPENDENCY UNMET PEER DEPENDENCY UNMET PEER DEPENDENCY WARN requires a peer of but none was installed. Doing so will help you reduce the final bundle size of your app and ensure that only the necessary packages are installed in production.For example, when I install Angular2: npm install -save /Users/doug/Projects/dougludlow/temp That's it! Now you know how to properly work with dev, peer, and regular dependencies in any JavaScript project. This allows your app to install and use packages like react and react-dom during local development and unit testing, but it won't include them as real dependencies in the production build.įinally, when using a peer/dev dependency combination, you also should add the package in the externals configuration section of your Webpack or Rollup config file. When using peerDependencies, it's important to note that if you mark a package as a peer dependency, you also must include it in your devDependencies section. In doing so, you can then have your app with 20 dependencies but only have one copy of react and react-dom used in production provided in the dependencies in the package.json file of your parent app. In order to avoid this massive bloat of dependencies, library developers can instead use the peerDependencies section to specify that their library depends on react and react-dom, but the consumer of the package needs to be the one to provide it. If each of these packages lists react and react-dom in their dependencies section, then that means you'll have 20 copies of React in your app! (21 if you count the copy that your main parent app provides as well.) Let's say there are 20 of them and they all use React. Imagine that you have a large React app composed of many npm packages. peerDependencies are a crucial tool in reducing the size of your final production app. ![]() PeerDependencies are dependencies that your app relies on but expects another package to provide. Linters and code formatters like eslint, prettier, commitlint, husky, and lint-staged would all be devDependencies as well. These libraries are needed for writing unit tests for your code, but they're not part of your production app. The same goes for test frameworks and libraries like jest, karma, mocha, or jasmine. These are bundlers used to compile your app, but they're not part of your app. ![]() For example, webpack and rollup would both be devDependencies. There is an exception to this rule, but we'll cover this down in the Peer Dependencies section below.ĭevDependencies are typically the tooling you use to build your project, but they're not actually included in the app's production bundle. Any other packages like lodash or a design system library like Material UI ( would also be dependencies. If you're using react-router for client-side routing, that would also be part of your dependencies. If you're building a React app, then react and react-dom would be dependencies. In this article we'll look at the three types of dependencies found in the package.json file and what each does.ĭependencies are packages used in your app's production bundle. Understanding whether to include them as dependencies, devDependencies, or peerDependencies can sometimes be a struggle for newer developers. ![]() For example, you might use react and react-dom for your UI, lodash for utility helper methods, webpack or rollup as your bundler, and jest with for unit tests.Īll of these packages are stored as dependencies in your package.json file. When building a modern JavaScript app, you will likely rely on many other packages and third-party dependencies. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |