Does publishing to NPM add dependencies? - npm

The package react-canvas-draw has the following in its package.json on GitHub:
"dependencies": {
"catenary-curve": "^1.0.1",
"lazy-brush": "^1.0.1",
"prop-types": "^15.6.2",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "16.x"
},
"devDependencies": {
"all-contributors-cli": "^5.4.1",
"babel-eslint": "^7.2.3",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.1.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"gh-pages": "^1.1.0",
"nwb": "0.21.x",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.19.1"
},
However, when I view the package on NPM, I see:
"dependencies": {
"catenary-curve": "^1.0.1",
"codecov": "^3.5.0", // <-- note
"coveralls": "^3.0.4", // <-- note
"lazy-brush": "^1.0.1",
"prop-types": "^15.6.2",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "16.x"
},
"devDependencies": {
"all-contributors-cli": "^5.4.1",
"babel-eslint": "^7.2.3",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.1.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"gh-pages": "^1.1.0",
"nwb": "^0.21.5",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.19.1"
},
I noted above the two additional packages that I see: codecov and coveralls. They're also displayed in the user-friendly site.
Why are these in the NPM package entry, but not in the GitHub source?
My only thought: the words codecov and coveralls only really exist in the .travis.yml file:
before_install:
- npm install codecov coveralls
- npm install nwb
...So, npm publish is detecting the npm install commands and adding dependencies to package.json? I can't find anything to support this, but I don't have any better ideas.

You're correct in your assumption, executing npm install as of NPM v5 will add them to the package.json as dependencies. The subsequent npm publish that travis runs is then including this "updated" dependency list in the package.
It's interesting that they're shipping with those packages, as they're primarily "dev dependencies" so don't need to be included in the distributed bundle. You may want to open an issue or pull request that either declares these as dev dependencies in the package.json or includes a --save-dev in the .travis.yml.
(Though the latter would not be that great either as it would "add" those as dev deps of the published module that are not reflected on the github source).

Related

How to install all packages from Gatsby V3

I currently have Gatsby installed on version 4, but I wanted to "downgrade" it to version 3, and all dependencies to be compatible with version 3.
Is there any method to "downgrade" everything to the most up-to-date V3 version?
My package.json
"dependencies": {
"#babel/plugin-transform-typescript": "^7.16.1",
"#styled-icons/boxicons-regular": "^10.38.0",
"#types/node": "^16.11.7",
"#types/react": "^17.0.34",
"#types/react-helmet": "^6.1.4",
"gatsby": "^4.1.1",
"gatsby-plugin-gatsby-cloud": "^4.1.0",
"gatsby-plugin-image": "^2.1.2",
"gatsby-plugin-manifest": "^4.1.0",
"gatsby-plugin-offline": "^5.1.0",
"gatsby-plugin-react-helmet": "^5.1.0",
"gatsby-plugin-sharp": "^4.1.3",
"gatsby-source-filesystem": "^4.1.2",
"gatsby-transformer-sharp": "^4.1.0",
"plop": "^2.7.6",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-markdown": "^7.1.0",
"rehype-raw": "^6.1.0",
"styled-components": "^5.3.3",
"styled-media-query": "^2.1.2",
"swiper": "^7.2.0",
"tslint": "^6.1.3",
"typescript": "^4.4.4"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#react-icons/all-files": "^4.1.0",
"#storybook/addon-actions": "^6.3.12",
"#storybook/addon-essentials": "^6.3.12",
"#storybook/addon-links": "^6.3.12",
"#storybook/builder-webpack5": "^6.3.12",
"#storybook/manager-webpack5": "^6.3.12",
"#storybook/react": "^6.3.12",
"#types/react-dom": "^17.0.11",
"#types/styled-components": "^5.1.15",
"#types/swiper": "^5.4.3",
"#typescript-eslint/eslint-plugin": "^5.3.1",
"#typescript-eslint/parser": "^5.3.1",
"babel-loader": "^8.2.3",
"babel-plugin-styled-components": "^1.13.3",
"chromatic": "^6.0.6",
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"gatsby-plugin-scss-typescript": "^5.1.0",
"gatsby-plugin-styled-components": "^5.1.0",
"gatsby-plugin-typescript-scss-modules": "^1.0.7",
"prettier": "^2.4.1",
"storybook-addon-gatsby": "^0.0.2"
},
There's no magic command to downgrade automatically Gatsby version and all related dependencies. Basically, you need uninstall and reinstall Gatsby to your desired version:
If you need to reset your gatsby-cli version:
npm uninstall -g gatsby-cli
npm install -g gatsby-cli#latest
After that:
npm install gatsby#3.14
Where 3.14 is your desired version (according to the releases notes it should be 3.14).
Then, you will need to run:
npm outdated
To fix your dependency versions.
You'll need to remove the node_modules and the package-lock.json before installing and auditing the packages to avoid locked dependencies and odd behaviors.

React native upgrade from babel 6 to babel 7

What would be the steps to upgrade from babel 6 to babel 7 an existing react-native project?
These are the old dependencies:
"dependencies": {
.........
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "0.55.4",
"react-redux": "5.0.7",
"redux": "^4.0.0",
"redux-actions": "^2.6.1",
"redux-mock-store": "^1.5.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.1.0",
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "^7.4.0",
"gulp": "^3.9.0",
"gulp-eslint": "4.0.2",
"gulp-mocha": "6.0.0",
"jest": "^23.5.0",
.....
},
What steps do you have to follow to make this update?
How should the new dependencies looks like?
It is not very clear for me (after reading the babel doc) what I should do to make this upgrade, commands to run and what should be added in dependencies and what in devDependencies.
Also it is not very clear for me what is the difference between babel 6 and babel 7 regarding what is happening with the JS code in a react-native project.
Please don't respond with just links to babel doc or to react-native 0.57 change log.
I would need at least some basic steps to do this upgrade and an example of a package.json of a RN project based on babel 7.
Short answer:
run npx babel-upgrade
(then you can take a look in package.json to check what changed)
Long answer:
For RN 0.57.x after reading the babel and babel-upgrade docs I realized it was enough to have all the old babel dependencies inside devDependencies for my project:
"dependencies": {
.........
"react": "16.3.1",
"react-native": "0.55.4",
},
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"react-native": "0.55.4",
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
},
1) I used npx and babel-upgrade (npx is already included in npm versions >= 5.2.0)
If you have older npm versions you have to install npx globally.
npx lets you run babel-upgrade without installing it locally.
2) I ran npx babel-upgrade ( without the --write option) to see how the upgrade will affect my package.json deps)
3) I ran npx babel-upgrade --write
4) I set RN version to 0.57.1 and changed the babel-preset dependency from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "^0.45.0",and .babelrc configuration to:
{
"presets": ["module:metro-react-native-babel-preset"]
}
as written in the RN change log instructions.
Now package.json looks like this:
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1",
.......
}
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
}
I am not sure if all the new dependencies added by gradle-upgrade are needed but the project builds and runs ok for both android and ios.
If you find a better solution or improvements for this babel update please add a comment or add a new answer, I will be happy to update my answer or accept a new better one.
Sources:
https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057
https://github.com/babel/babel-upgrade
For RN 0.58.6 I noticed I do not need so many babel deps. I noticed this creating a new project with a react-native init command.
My package.json file looks now like this:
{
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.6",
// ....
},
"devDependencies": {
"#babel/core": "^7.0.0-0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.6.3",
// ....
},
"jest": {
"preset": "react-native",
// ...
}
}
NOTE:
For IOS: I was able to build it in IOS without any react/react-native deps in pod file. I added/re-added those inside Linked Frameworks and Libraries section
Use babel-upgrade.
You can try using babel-upgrade in order to automatically upgrade your Babel dependencies.
It's very easy to use, even without installing it globally.
I recommend having a clean working directory (no unstaged changes) and simply run the following command:
npx babel-upgrade --write
This will update your package.json and your .babelrc files with the correct Babel versions and packages.
The --write command just tells the tool to save the changes to disk. That's why I suggested having a clean working directory so you can review the changes with git diff. If you omit --write it will just show the desired changes in the console.
You can see more information at https://github.com/babel/babel-upgrade.
For anyone having this problem in 2021 :
npm install --save-dev #babel/core #babel/cli

Ensure package-lock.json keeps specific versions for dependencies' requirements

Some updates to a dependency of one of our dependencies broke our build and was a bit tricky to find out what the cause of the issue was...
We finally noticed that #vue/component-compiler-utils requires "prettier": "^1.11.1" and - as discussed in vue webpack template missing parser that Prettier#1.13.0 causes the issue we were having, before rolling back to Prettier#1.12.0
How do we ensure that package-lock.json "locks" dependencies to a version and do not update over time or when re-installed?
This is an example of our package.json from which the incorrect lock file is generated:
{
...
"dependencies": {
"html-loader": "0.5.1",
"vue": "2.5.16",
"vue-class-component": "6.2.0",
"vue-property-decorator": "6.1.0",
"vue-router": "3.0.1",
"vuex": "3.0.1",
"vuex-class": "0.3.0",
...
},
"devDependencies": {
"#types/jest": "22.0.1",
"#vue/cli-plugin-babel": "3.0.0-beta.11",
"#vue/cli-plugin-eslint": "3.0.0-beta.11",
"#vue/cli-plugin-typescript": "3.0.0-beta.11",
"#vue/cli-plugin-unit-jest": "3.0.0-beta.7",
"#vue/cli-service": "3.0.0-beta.11",
"#vue/eslint-config-airbnb": "3.0.0-beta.11",
"#vue/eslint-config-typescript": "3.0.0-beta.11",
...
}
}
Using npm shrinkwrap fixes the issue, it converts package-lock.json to a npm-shrinkwrap.json which hashes and locks every specific version installed.
See What is the difference between npm-shrinkwrap.json and package-lock.json? for more details
I'm not entirely sure if npm shrinkwrap fixes the issue in npm v6+.
Here is a snippet of the npm-shrinkwrap.json file that is being generated for vue-loader.
It seems as though even the shrinkwrap is not locking down the requires versions.
"vue-loader": {
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-14.0.3.tgz",
"integrity": "sha512-5kFK/df1jgVoFcTB9p19rrYcyuYduoZzUSf6chMVsIRmVL9AKPYCa9JGLAZsU1XXGbGO9MSkwbum91u2dx7YcQ==",
"dev": true,
"requires": {
"consolidate": "^0.14.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"lru-cache": "^4.1.1",
"postcss": "^6.0.8",
"postcss-load-config": "^1.1.0",
"postcss-selector-parser": "^2.0.0",
"prettier": "^1.7.0",
"resolve": "^1.4.0",
"source-map": "^0.6.1",
"vue-hot-reload-api": "^2.2.0",
"vue-style-loader": "^4.0.1",
"vue-template-es2015-compiler": "^1.6.0"
}

npm install dosen't install dev dependencies

I have a project where I use npm for handling dependencies. The project is bundled with Webpack and will run on the client (it's built for using gh-pages for hosting) with no production dependencies. Therefore I have only devDependencies in my package.json. However, when I run npm install nothing gets installed. When I run npm install --dev my dependencies gets installed as they are supposed to. Since --dev is deprecated I tried with npm install --only=dev as well, however nothing gets installed then either! Is there something broken in my package.json (inserted below) or am I misunderstanding npm?
{
"name": "Boilerplate",
"version": "0.0.1",
"description": "A boilerplate to quickly get started with an offline first React/Redux app",
"repository": {
"type": "git",
"url": "https://github.com/OskarKlintrot/Offline-First-React-And-Redux-Boilerplate"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --progress --colors --production"
},
"private": true,
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^4.0.5",
"babel-loader": "^6.2.0",
"babel-polyfill": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-1": "^6.1.18",
"eslint": "^1.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.13.1",
"file-loader": "^0.8.5",
"history": "^1.17.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"react-hot-loader": "^1.3.0",
"react-mdl": "^1.0.2",
"react-redux": "^4.0.4",
"react-router": "^1.0.2",
"react-tap-event-plugin": "^0.2.1",
"redux": "^3.0.5",
"redux-devtools": "^3.0.0",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.1",
"redux-history-transitions": "^1.0.0",
"redux-thunk": "^1.0.2",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}

How to install necessary packages by `npm install`

I have the following in package.json.
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"laravel-elixir": "^4.0.0",
"bootstrap-sass": "^3.0.0"
}
}
After running npm install when I check node_modules, there are a lot of packages are installed. from .bin, abbrev to yeast. I think there are more than 200 packages. I thought npm installs only necessary packages including dependencies.
Q1: How can I avoid installing unnecessary packages and installing only necessary packages. Can I do it? Or do I need all packages?
Q2: Does npm install all npm packages?
Summary:
Q1: How can I avoid installing unnecessary packages and installing
only necessary packages. Can I do it? Or do I need all packages?
You are installing all dependencies required by the dependencies of your module (modules requiring modules).
Q2: Does npm install all npm packages?
No.
In depth:
You installed gulp. Here are gulp's dependencies:
"dependencies": {
"archy": "^1.0.0",
"chalk": "^1.0.0",
"deprecated": "^0.0.1",
"gulp-util": "^3.0.0",
"interpret": "^1.0.0",
"liftoff": "^2.1.0",
"minimist": "^1.1.0",
"orchestrator": "^0.3.0",
"pretty-hrtime": "^1.0.0",
"semver": "^4.1.0",
"tildify": "^1.0.0",
"v8flags": "^2.0.2",
"vinyl-fs": "^0.3.0"
}
archy has the following dependencies:
"dependencies": {
"ansi-styles": "^2.1.0",
"escape-string-regexp": "^1.0.2",
"supports-color": "^3.1.2"
},
interpret (still going through gulp dependencies) has the following dependencies:
"dependencies": {
"extend": "^2.0.1",
"findup-sync": "^0.3.0",
"flagged-respawn": "^0.3.1",
"rechoir": "^0.6.0",
"resolve": "^1.1.6"
}
liftoff has the following dependencies:
"dependencies": {
"extend": "^2.0.1",
"findup-sync": "^0.3.0",
"flagged-respawn": "^0.3.1",
"rechoir": "^0.6.0",
"resolve": "^1.1.6"
}
orchestrator requires the following dependencies:
"dependencies": {
"end-of-stream": "~0.1.5",
"sequencify": "~0.0.7",
"stream-consume": "~0.1.0"
},
...
In short... The bigger, more dependent module you install, the more dependencies are required. It's not always a bad thing. I recommend installing only what is needed to get the job you need done (sometimes it's a lot, sometimes not).
UPDATE
I just noticed that gulp was a dev-dependency... Moving on to elixir non-dev dependencies:
"dependencies": {
"babelify": "^7.2.0",
"browser-sync": "^2.7.10",
"browserify": "^11.2.0",
"del": "^1.2.0",
"glob": "^5.0.14",
"gulp-autoprefixer": "^2.3.1",
"gulp-babel": "^6.1.0",
"babel-preset-es2015": "^6.1.0",
"babel-preset-react": "^6.1.18",
"gulp-batch": "^1.0.5",
"gulp-coffee": "^2.3.1",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.0.0",
"gulp-if": "^1.2.5",
"gulp-less": "^3.0.3",
"gulp-load-plugins": "^1.0.0-rc.1",
"gulp-notify": "^2.2.0",
"gulp-phpspec": "^0.5.3",
"gulp-phpunit": "0.11.x",
"gulp-rename": "^1.2.2",
"gulp-rev": "^5.1.0",
"gulp-rev-replace": "^0.4.2",
"gulp-sass": "^2.0.3",
"gulp-sourcemaps": "^1.5.2",
"gulp-shell": "^0.5.0",
"gulp-uglify": "^1.4.2",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.2.4",
"insert-css": "^0.2.0",
"merge-stream": "^0.1.8",
"parse-filepath": "^0.5.0",
"partialify": "^3.1.3",
"path": "^0.11.14",
"require-dir": "^0.3.0",
"run-sequence": "^1.1.1",
"underscore": "^1.8.3",
"underscore-deep-extend": "0.0.5",
"vinyl-buffer": "^1.0.0",
"vinyl-paths": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.2.3"
},
...