Lors de l'exécution npm install
J'ai reçu ces avertissements:
npm WARN The package babel-core is included as both a dev and production dependency.
npm WARN The package babel-loader is included as both a dev and production dependency.
npm WARN The package babel-preset-react is included as both a dev and production dependency.
npm WARN The package redux-thunk is included as both a dev and production dependency.
npm WARN The package uglifyjs is included as both a dev and production dependency.
up to date in 7.183s
npm WARN The package babel-core is included as both a dev and production dependency.
npm WARN The package babel-loader is included as both a dev and production dependency.
npm WARN The package babel-preset-react is included as both a dev and production dependency.
npm WARN The package redux-thunk is included as both a dev and production dependency.
npm WARN The package uglifyjs is included as both a dev and production dependency.
package.json
fichier:
{
...
"dependencies": {
"axios": "^0.15.3",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.9.0",
"bluebird": "^3.5.0",
"bootstrap-sass": "^3.3.7",
"classnames": "^2.2.5",
"console-polyfill": "^0.2.3",
"cross-env": "^1.0.8",
"css-loader": "^0.23.1",
"deepmerge": "^1.3.2",
"dom-helpers": "^3.0.0",
"expect": "^1.20.1",
"fuzzy": "^0.1.3",
"moment": "^2.18.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.8.0",
"react": "^15.1.0",
"react-addons-shallow-compare": "15.4.0",
"react-addons-test-utils": "^15.1.0",
"react-axios": "0.0.9",
"react-bootstrap-daterangepicker": "^3.2.2",
"react-daterange-picker": "^1.1.0",
"react-dom": "^15.1.0",
"react-draggable": "^2.2.3",
"react-redux": "^4.4.8",
"react-router": "^3.0.2",
"react-virtualized": "^8.5.2",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"uglifyjs": "=2.4.10",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.11.0"
},
"devDependencies": {
"assets-webpack-plugin": "^3.5.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"didyoumean": "^1.2.1",
"extract-text-webpack-plugin": "^1.0.1",
"glob": "^7.1.1",
"postcss-loader": "^1.3.0",
"purifycss-webpack-plugin": "^2.0.3",
"react-transform-hmr": "^1.0.4",
"redux-thunk": "^2.2.0",
"uglifyjs": "=2.4.10",
"webpack": "^1.15.0",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-split-chunks": "^0.1.1"
}
}
A remarqué qu'il y avait différentes versions installées. Que se passe-t-il exactement lorsque deux versions du même package sont installées pour dev et prod? Est-ce un comportement normal? Dois-je me débarrasser des références dupe dans le fichier package.json?
Vous avez le package mentionné dans les deux sections de vos dépendances; vous ne devez absolument pas le faire car cela signifie que votre installation de production aura une version différente de votre installation de développement.
Si tu fais npm install
vous obtiendrez tous les dependencies
& devDependencies
installés; mais si vous le faites npm install --production
vous obtenez seulement dependencies
installé.
Vous devez supprimer les éléments dont vous n'avez pas besoin pour que votre application s'exécute à partir de dependencies
et les placer dans devDependencies
. Les choses dans dependencies
doivent être considérées comme des exigences pour exécuter l'application (après qu'une transformation de code s'est produite).
Il n'y a aucun cas où une dépendance devrait être dans les deux.
Mon cas d'utilisation est exactement ce que @Jim a souligné dans le commentaire de la réponse acceptée.En développement, je voulais utiliser mes fichiers de module local car j'y travaillais en même temps que je travaillais sur mes autres projets en l'utilisant. En production, j'utiliserais le module de VCS, et je ne veux pas changer manuellement le fichier package.json à chaque fois.
Voici comment j'ai configuré mon package.json:
"dependencies": {
"module-name": "git+ssh://[email protected]/XXX/XXX.git#master"
},
"devDependencies": {
"module-name-dev": "file:../XXX"
}
Avec cette configuration, npm ne me donne aucune erreur, car le nom des modules est différent, maintenant ce qui reste à faire est d'exiger le paquet dev en développement à la place du principal.
J'ai trouvé le paquet module-alias , il vous permet d'utiliser des noms d'alias pour les chemins que vous souhaitez exiger.
Dans votre fichier app.js au tout début, vous devez ajouter ce code:
if (process.env.NODE_ENV === 'development') {
const moduleAlias = require('module-alias');
moduleAlias.addAlias('module-name', 'module-name-dev');
}
A partir de maintenant, chaque fois que vous aurez besoin du module-name
module, vous obtiendrez en fait le module-name-dev
en développement.
En production, vous ne devez pas installer les devDependencies, et l'alias ne fonctionnera pas, donc aucune étape supplémentaire n'est nécessaire pour changer entre les 2.
Si vous utilisez webpack, vous n'avez pas besoin du module-alias
, vous pouvez ajouter un alias à la configuration du webpack en utilisant webpack-chain comme ceci:
chainWebpack: (config) => {
if (process.env.NODE_ENV === 'development') {
config.resolve.alias
.set('module-name', 'module-name-dev');
}
},