dependencies vs devDependencies

本文是作者对dependencies vs devDependencies的介绍,包括dependencies vs devDependencies的优势、实现细节、相关资料等,这些步骤可以帮助作者提高dependencies vs devDependencies的效率。

2月 17, 2019 · 2 分钟阅读时长 · 791 字 · -阅读 -评论 · 编程开发

npm是 Node.js 平台的包管理工具,实际开发中我们并不是从零做起,往往需要安装大量的包用于开发及生产使用,这时,我们就需要安装包,并且将其配置在package.json文件中,明确其依赖。在package.json文件中,有两个依赖声明位置dependencies和devDependencies。那么针对一个包,我们到底是安装到dependencies还是devDependencies呢,本文旨在把这点差异明确下。

dependencies vs devDependencies-图1

官方定义

先来权威官方概述

dependencies

Dependencies are specified in a simple object that maps a package name to a version range. The version range is a string which has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL.

Please do not put test harnesses or transpilers in your dependencies object. See devDependencies, below.

官方明确了一点就是不要将测试及转译相关包放在dependencies,而应该放在devDependencies

devDependencies

If someone is planning on downloading and using your module in their program, then they probably don’t want or need to download and build the external test or documentation framework that you use.

In this case, it’s best to map these additional items in a devDependencies object.

These things will be installed when doing npm link or npm install from the root of a package, and can be managed like any other npm configuration param. See npm-config for more on the topic.

For build steps that are not platform-specific, such as compiling CoffeeScript or other languages to JavaScript, use the prepare script to do this, and make the required package a devDependency. 我来简要翻下: 构建需要而非平台专用,比如编译CoffeeScript或者其它语言到JavaScript,这样的应该设定为devDependency。

上例子

如下是我实际上手的一个项目,项目是一个React前端项目,因为处于从JS到TS迁移期,所以存在Babel.

贴出大致的包依赖表,我们拿其中一些包来说明下。

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.4",
    "@fortawesome/free-solid-svg-icons": "5.3.1",
    "@fortawesome/react-fontawesome": "0.1.3",
    "availity-reactstrap-validation": "2.0.6",
    "axios": "0.18.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "4.1.3",
    "classnames": "^2.2.5",
    "deep-equal": "latest",
    "file-saver": "^2.0.0",
    "history": "^4.7.2",
    "html2canvas": "1.0.0-alpha.12",
    "immutable": "^3.8.2",
    "jest-enzyme": "^7.0.1",
    "loaders.css": "0.1.2",
    "lodash": "4.17.10",
    "moment": "2.22.2",
    "normalize.css": "^7.0.0",
    "promise": "8.0.1",
    "prop-types": "^15.6.1",
    "query-string": "5.1.1",
    "rc-dropdown": "^2.2.0",
    "rc-input-number": "^4.0.6",
    "rc-menu": "^7.4.20",
    "rc-pagination": "^1.14.0",
    "rc-select": "^7.5.1",
    "rc-slider": "^8.6.1",
    "rc-tooltip": "^3.7.3",
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "react-hot-loader": "3.1.1",
    "react-intl": "^2.7.2",
    "react-modal": "^3.3.2",
    "react-redux": "5.0.7",
    "react-redux-loading-bar": "4.0.5",
    "react-router-dom": "4.3.1",
    "react-select": "^2.0.0",
    "react-sizeme": "^2.5.2",
    "react-toastify": "4.2.0",
    "react-transition-group": "^2.5.2",
    "redux": "4.0.0",
    "redux-actions": "^2.3.0",
    "redux-actions-helper": "^1.0.0",
    "redux-devtools": "3.4.1",
    "redux-devtools-dock-monitor": "1.1.3",
    "redux-devtools-log-monitor": "1.4.0",
    "redux-promise-middleware": "5.1.1",
    "redux-saga": "^0.16.2",
    "redux-thunk": "2.3.0",
    "reselect": "^3.0.1",
    "source-map-loader": "^0.2.2",
    "superagent": "^3.6.3",
    "jspdf": "1.5.3",
    "xml2js": "0.4.19"
  },
  "devDependencies": {
    "@types/enzyme": "3.1.13",
    "@types/jest": "23.3.1",
    "@types/lodash": "^4.14.119",
    "@types/node": "10.9.2",
    "@types/react": "16.4.12",
    "@types/react-dom": "16.0.7",
    "@types/react-intl": "^2.3.15",
    "@types/react-redux": "6.0.6",
    "@types/react-router-dom": "4.3.0",
    "@types/redux": "3.6.31",
    "@types/webpack-env": "1.13.6",
    "autoprefixer": "9.2.0",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^3.0.3",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "6.26.0",
    "browser-sync": "2.26.3",
    "browser-sync-webpack-plugin": "2.2.2",
    "cache-loader": "1.2.2",
    "codelyzer": "3.1.2",
    "copy-webpack-plugin": "4.5.2",
    "cross-env": "5.2.0",
    "css-loader": "1.0.0",
    "enzyme": "3.5.0",
    "enzyme-adapter-react-16": "1.3.0",
    "enzyme-to-json": "3.3.4",
    "eslint": "4.9.0",
    "eslint-config-react-app": "^2.0.1",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.35.0",
    "eslint-plugin-import": 
Alan H
Authors
开发者,数码产品爱好者,喜欢折腾,喜欢分享,喜欢开源