Introduction to NPM and Bower

NPM 简介

NPM 是 Nodejs Package Manager 的缩写，是 Nodejs 的官方包管理工具
详细教程参见 npm Document

一般在一个Web项目根目录下有 package.json 文件，该项目即为npm项目，在使用前，必须先安装依赖包，运行

npm install

如果需要在当前项目安装其他包，运行

npm install [package-name] --save

其中 --save 指将该包目前安装的版本自动添加到 package.json 的 dependencies 下

如果需要全局安装某个包（用于在命令行下使用该包的功能），如全局安装bower包管理器，运行

npm install bower -g

其中 -g 就是全局安装的意思（该操作通常需要管理员权限，因为全局安装的默认路径一般是系统路径）

同理，如果想要移除一个包，使用 uninstall 即可，如

npm uninstall [package-name]
npm uninstall [package-name] --save
npm uninstall [package-name] -g

其中 --save 和 -g 的作用和安装时类似

package.json 简介

请参考 官方文档，这里简要介绍

以本项目的 package.json 文件为例

{
  "name": "JI-Life",
  "version": "0.2.0",
  "description": "A website for ALL students in JI",
  "homepage": "http://www.umji.sjtu.edu.cn",
  "authors": [
    "tc-imba",
    "AuroraZK",
    "grasshopper001"
  ],
  "license": "MIT",
  "keywords": [
    "JI"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/SJTU-UMJI-Tech/JI-Student-Web.git"
  },
  "dependencies": {
    "babel-core": "^6.22.1",
    "babel-preset-es2015": "^6.22.0",
    "bootstrap": "^4.0.0-alpha.6",
    "bootstrap-touchspin": "^3.1.1",
    "bootstrap-v4-dev": "^4.0.0-alpha.5",
    "bower": "^1.8.0",
    "chart.js": "^2.5.0",
    "chosen-js": "^1.6.2",
    "clean-css": "^4.0.6",
    "cropper": "^2.3.4",
    "editor.md": "^1.5.0",
    "flatpickr": "^2.3.7",
    "flowchart.js": "^1.6.5",
    "font-awesome": "^4.7.0",
    "google-code-prettify": "^1.0.5",
    "gritter": "^1.7.4",
    "handlebars": "^4.0.6",
    "jquery": "^3.1.1",
    "jquery-slimscroll": "^1.3.8",
    "jquery-ui-dist": "^1.12.1",
    "jquery.flowchart": "^1.1.0",
    "js-sequence-diagrams": "^1000000.0.6",
    "katex": "^0.7.1",
    "marked": "^0.3.6",
    "metismenu": "^2.6.2",
    "mysql": "^2.13.0",
    "pace-progress": "^1.0.2",
    "raphael": "^2.2.7",
    "require-css": "^0.1.8",
    "requirejs": "^2.3.2",
    "select2": "^4.0.3",
    "shelljs": "^0.7.6",
    "toastr": "^2.1.2",
    "uglify-js": "^2.7.5",
    "underscore": "^1.8.3"
  },
  "scripts": {
    "preinstall": "npm config set registry https://registry.npm.taobao.org",
    "postinstall": "bower install",
    "compile:template": "node deployment/template.js",
    "compile:build": "node deployment/build.js",
    "deploy:development": "node deployment/deploy.js development",
    "deploy:production": "node deployment/deploy.js production",
    "deploy": "node deployment/deploy.js development"
  }
}

• name, version, description, authors 等很容易理解
• dependencies 就是使用 --save 选项安装的包（也可以在这里手动添加并运行 npm install，不推荐）
• scripts 是指可以使用 npm run [script-name] 运行的脚本
  其中 preinstall 和 postinstall 会分别在 npm install 运行的先后自动运行
  这里在安装前将源切换为淘宝源提高速度，安装后运行 bower install 来安装bower中的依赖项目

Bower 简介

Bower是一个专门用于管理前端包的npm程序，但在本项目中尽量使用npm包，不存在对应npm包时才需要使用bower包
详情可参考 Bower官方文档

Bower的使用方法和npm非常类似，如以下命令

bower install [package-name]
bower install [package-name] --save
bower uninstall [package-name]
bower uninstall [package-name] --save

bower.json 简介

以本项目的 bower.json 文件为例

{
  "name": "ji-life",
  "version": "0.2.0",
  "description": "A website for ALL students in JI",
  "homepage": "http://www.umji.sjtu.edu.cn",
  "authors": [
    "tc-imba",
    "AuroraZK"
  ],
  "license": "MIT",
  "keywords": [
    "JI"
  ],
  "ignore": [
    "**/.*",
    "test",
    "Gemfile"
  ],
  "dependencies": {
    "footable": "^3.1.4",
    "qrcode.js": "qrcode-js#*"
  }
}

可以看出和 package.json 非常相似

同时，bower还提供配置功能，配置信息在 .bowerrc 下

{
  "directory": "bower_modules"
}

此处的功能是将bower的依赖包下载路径修改为 bower_modules