JHipster一知半解-4.2依存パッケージ管理(npmとyarn)
8107 ワード
回文集目録: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 registryhttps://registry.npm.taobao.org ・・2.CNPM npm install-g cnpm--registry=をインストールするhttps://registry.npm.taobao.org
3.yarn切替淘宝源・・yarn config set registryhttps://registry.npm.taobao.org ・・yarn設定を確認・・・yarn config list・・・
bowerとyarn
bowerはアーキテクチャから言えば、やはりNPMに依存しています.自身はnpmの拡張パッケージです.彼のインストールと使用はNPM環境から離れられません.機能的にはnpmより優れています.プロファイルによって自動的に関連する依存性をダウンロードできます.フラットディレクトリ構造ではなく、NPMのような入れ子構造です.でも、自分のbower.jsonとbowerがあります.componentsフォルダは、mavernがgradleに移行するのと同じです.似たようなものを新たに勉強しなければならないです.Jhipspter 4はBowerを放棄して、twitterの製品のyarnを使って、yarnの最大の利益は完全にnpmに互換して、ものもpackage.jsonとnode_を放すのです.modulesでは、自分の操作記録はyarn.lock(ファイルロック、記録前の操作)に入れています.学習コストと切替コストはとても低いです.もちろん、yarnはオフラインインストール(キャッシュダウンロードされたパッケージ)、パラレル加速、出力最適化などnpmにない追加機能を提供しています.yarnはnpmよりも快適に使えます.
JHipsperのpackage.jsonの詳細
資源と書籍の推薦 NPM使用紹介http://www.runoob.com/nodejs/nodejs-npm.html bowerとnpmの依存管理https://www.jianshu.com/p/afa739956238 、node.jsのモジュールマネージャとして、npmの代わりにyarnを使用する.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
npm
NPM(node package manager)は、NodeJSが提供するパケット管理ツールであり、NodeJSと一緒にバンドルしてインストールすることにより、ユーザーがNPMサーバから他の人が作成した第三者パッケージをダウンロードして、フロントエンドのMavenライブラリに相当する.NodeJSを運営するモジュールを管理するのが本来の意味で、ブラウザの先端フレームが流行するにつれて、参考にして一緒に使うようになりました.
国内のnpmをインストールするには必ず覚えておいてください.1.npmソースを設定するのはtaobaoソースです.
npmソースを確認します.・・npm config get registry・・npmソースをtaobaoソースに切り替えます.(速度が速いです.):・・npm config set registryhttps://registry.npm.taobao.org ・・2.CNPM npm install-g cnpm--registry=をインストールするhttps://registry.npm.taobao.org
3.yarn切替淘宝源・・yarn config set registryhttps://registry.npm.taobao.org ・・yarn設定を確認・・・yarn config list・・・
bowerとyarn
bowerはアーキテクチャから言えば、やはりNPMに依存しています.自身はnpmの拡張パッケージです.彼のインストールと使用はNPM環境から離れられません.機能的にはnpmより優れています.プロファイルによって自動的に関連する依存性をダウンロードできます.フラットディレクトリ構造ではなく、NPMのような入れ子構造です.でも、自分のbower.jsonとbowerがあります.componentsフォルダは、mavernがgradleに移行するのと同じです.似たようなものを新たに勉強しなければならないです.Jhipspter 4はBowerを放棄して、twitterの製品のyarnを使って、yarnの最大の利益は完全にnpmに互換して、ものもpackage.jsonとnode_を放すのです.modulesでは、自分の操作記録はyarn.lock(ファイルロック、記録前の操作)に入れています.学習コストと切替コストはとても低いです.もちろん、yarnはオフラインインストール(キャッシュダウンロードされたパッケージ)、パラレル加速、出力最適化などnpmにない追加機能を提供しています.yarnはnpmよりも快適に使えます.
JHipsperの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の依存は多くなく、Anglarの依存以外に、主にboots rapと@ngbootstrapをスタイルとして依存していることが分かります.注意すべきなのは、JHisterはまた自分で1つの前端の庫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"
},
開発に依存する内容はたくさんあります.anglar-cli部分、Typecriptに必要な@typesとtslent、Webpackおよび各loaderパッケージ用、jasmine、karmaとprotractorの先端テストフレームを含みます.依存の中から見れば、Jhipsperは依存のバージョンに限定しています.使っていません. "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"
}
最後にscprestの部分は操作が必要なスクリプトです.使う時に使えます.npm run yarn run
実行します.よく使われるのはstart、build、testのいくつかです.資源と書籍の推薦