回文集目录:JHipster一知半解

npm

NPM（node package manager）是NodeJS提供的包管理工具,随着NodeJS一起捆绑安装，允许用户从NPM服务器下载别人编写的第三方包到本地，相当于前端的maven库。本意是管理运行NodeJS上的模块，随着运行在浏览器的前端框架越发流行，也借鉴过来一同使用了。

国内安装npm一定需要记得：
1.设置npm源为taobao源

查看npm源：
···
npm config get registry
···
切换npm源为taobao源（速度快一点）：
···
npm config set registry https://registry.npm.taobao.org
···
2.安装CNPM
npm install -g cnpm --registry=https://registry.npm.taobao.org

3.yarn切换淘宝源
···
yarn config set registry https://registry.npm.taobao.org
···
查看yarn设置
···
yarn config list
···

bower和yarn

bower从架构来说，还是依赖于NPM的，本身就是npm的一个扩展包他的安装和使用离不开NPM环境。从功能上说是优于npm的，它能据配置文件自动下载相关依赖，并且是扁平目录结构不是，NPM那种嵌套的结构。但是它有自己的bower.json和bower_components文件夹，等于mavern过渡到gradle，需要重新学习一套类似的东西，大部分人不得已是不会去做的。
Jhipster4就放弃了Bower，转而使用twitter出品的yarn，yarn最大的好处就是完全兼容npm，东西也是放package.json和node_modules中，自己的操作记录就放在yarn.lock(锁文件，记录之前的操作)里面，学习成本和切换成本都很低。
当然，yarn还提供了离线安装（缓存下载过的包），并行加速，输出优化等npm没有的附加功能，使得yarn用起来比npm舒服。

JHipster的package.json详解

  "name": "jhipster-sample-application-ng-2",
  "version": "0.0.0",
  "description": "Description for jhipsterSampleApplicationNG2",
  "private": true,
  "license": "UNLICENSED",
  "cacheDirectories": [
    "node_modules"
  ],

工程名，版本，描述等基础信息。

"dependencies": {
    "@angular/common": "4.3.2",
    "@angular/compiler": "4.3.2",
    "@angular/core": "4.3.2",
    "@angular/forms": "4.3.2",
    "@angular/http": "4.3.2",
    "@angular/platform-browser": "4.3.2",
    "@angular/platform-browser-dynamic": "4.3.2",
    "@angular/router": "4.3.2",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "bootstrap": "4.0.0-beta",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "jquery": "3.2.1",
    "ng-jhipster": "0.2.12",
    "ng2-webstorage": "1.8.0",
    "ngx-cookie": "1.0.0",
    "ngx-infinite-scroll": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "swagger-ui": "2.2.10",
    "tether": "1.4.0",
    "zone.js": "0.8.16"
  },

可以看出，JHipster的依赖并不多，除了Angular的依赖外，主要依赖了bootsrap和@ng-bootstrap作为样式。值得注意的是，JHipster还自己封装了一个前端库ng-jhipster，后面我们做代码分析时候，会单独列出来。

"devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "4.3.2",
    "@types/jasmine": "2.5.53",
    "@types/node": "8.0.18",
    "@types/selenium-webdriver": "3.0.4",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "3.2.2",
    "browser-sync": "2.18.13",
    "browser-sync-webpack-plugin": "1.2.0",
    "codelyzer": "3.1.2",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.4",
    "exports-loader": "0.6.4",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "generator-jhipster": "4.10.2",
    "html-loader": "0.5.0",
    "html-webpack-plugin": "2.30.1",
    "jasmine-core": "2.7.0",
    "jasmine-reporters": "2.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "1.1.1",
    "karma-intl-shim": "1.0.3",
    "karma-jasmine": "1.1.0",
    "karma-junit-reporter": "1.2.0",
    "karma-notify-reporter": "1.0.1",
    "karma-remap-istanbul": "0.6.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.4",
    "merge-jsons-webpack-plugin": "1.0.11",
    "ngc-webpack": "3.2.2",
    "protractor": "5.1.2",
    "protractor-jasmine2-screenshot-reporter": "0.4.0",
    "proxy-middleware": "0.15.0",
    "puppeteer": "0.10.2",
    "rimraf": "2.6.1",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "string-replace-webpack-plugin": "0.1.3",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "ts-node": "3.3.0",
    "tslint": "5.5.0",
    "tslint-loader": "3.5.3",
    "typescript": "2.5.2",
    "xml2js": "0.4.17",
    "uglifyjs-webpack-plugin": "1.0.0-beta.2",
    "webpack": "3.6.0",
    "webpack-dev-server": "2.8.2",
    "webpack-merge": "4.1.0",
    "webpack-notifier": "1.5.0",
    "webpack-visualizer-plugin": "0.1.11",
    "web-app-manifest-loader": "0.1.1",
    "write-file-webpack-plugin": "4.1.0"
  },

开发依赖内容就很多了，主要包含angular-cli部分，Typescript需要的@types和tslint，Webpack以及各种loader打包程序用，jasmine、karma和protractor前端测试框架。
从依赖里面可以看到，Jhipster对于依赖的版本都是限定了，并没有用^,~去兼容高版本，毕竟它自己更新的也很快。

 "engines": {
    "node": ">=6.9.0"
  },

这句很直接了，要求node版本需要大于6.9

"scripts": {
    "lint": "tslint --type-check --project './tsconfig.json' -e 'node_modules/**'",
    "lint:fix": "yarn run lint -- --fix",
    "ngc": "ngc -p tsconfig-aot.json",
    "cleanup": "rimraf target/{aot,www}",
    "clean-www": "rimraf target//www/app/{src,target/}",
    "start": "yarn run webpack:dev",
    "serve": "yarn run start",
    "build": "yarn run webpack:prod",
    "test": "karma start src/test/javascript/karma.conf.js",
    "test:watch": "yarn test -- --watch",
    "webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base",
    "webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile",
    "webpack:build": "yarn run cleanup && yarn run webpack:build:main",
    "webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
    "webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
    "webpack:test": "yarn run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
    "e2e": "protractor src/test/javascript/protractor.conf.js",
    "postinstall": "webdriver-manager update"
  }

最后scprit部分，就是我们需要操作的脚本了，使用的时候可以用

npm run 或 yarn run

执行。常用的就是start，build，test这几个。

资源和书籍推荐

• NPM 使用介绍
  http://www.runoob.com/nodejs/nodejs-npm.html
• bower和npm的依赖管理
  https://www.jianshu.com/p/afa739956238
• 使用yarn代替npm作为node.js的模块管理器
  https://www.jianshu.com/p/bfe96f89da0e
• Yarn vs npm: 你需要知道的一切
  http://web.jobbole.com/88459/
• npm package.json属性详解
  https://www.cnblogs.com/tzyy/p/5193811.html