タグ
検索タグ
メニュー
変更履歴
| ページ | 日付 |
|---|---|
| SBC(シングルボードコンピュータ) / マイクロコントローラー | 2020/07/13 12:10 |
| ハッカ～♪ の生活術 | 2020/07/06 21:21 |
| Termux - Android用ターミナル & Linux環境 | 2020/07/06 13:41 |
サイドバー
javascript:yarn
目次
Yarn - パッケージ マネージャ
本家: Home | Yarn - Package Manager
ソースコード: yarnpkg/yarn: 📦🐈 Fast, reliable, and secure dependency management.
ライセンス: 二条項BSDライセンス(BSD 2-Clause License)
Yarn (ヤーン) とは JavaScript(フロントエンド) のパッケージマネージャである。2016 年に FaceBook がオープンソースの BSD ライセンスで公開した。
npm と互換性 (package.json, node_modules/ で構成) があり、npm よりも処理が高速である。
ヤ～ンばか～ん…😅💦💦💦 (※これはイメージです！！)
んふ～ん🎵 そこはお耳なの んふ～ん🎵…
いやんばか〜ん
いやんばか～ん/林家木久蔵 - 歌詞検索サービス 歌詞ＧＥＴ
インストール
Scoop によるインストール。
nvm (Node Version Manager)、および、Node.js - サーバーサイド JavaScript 環境 のインストールについては、Node.js - サーバーサイド JavaScript 環境 | Windows - nvm-windows 編 を参照のこと。
Node.js の動作確認。
$ node --version
v12.17.0
Yarn をインストールする。
$ scoop install yarn
Installing 'yarn' (1.22.4) [64bit] yarn-1.22.4.msi (1.6 MB) [====================================================================================] 100% Checking hash of yarn-1.22.4.msi ... ok. Extracting yarn-1.22.4.msi ... done. Linking ~\scoop\apps\yarn\current => ~\scoop\apps\yarn\1.22.4 Persisting cache Persisting mirror Persisting global Running post-install script... yarn config v1.22.4 success Set "cache-folder" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\cache". Done in 0.68s. yarn config v1.22.4 success Set "yarn-offline-mirror" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\mirror". Done in 0.79s. yarn config v1.22.4 success Set "global-folder" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\global". Done in 0.70s. yarn config v1.22.4 success Set "prefix" to "C:\\Users\\tomoyan\\scoop\\apps\\yarn\\current\\global". Done in 0.65s. 'yarn' (1.22.4) was installed successfully! 'yarn' suggests installing 'nodejs' or 'nodejs-lts' or 'nvm' or 'nvs'.
Yarn のバージョン確認。
$ yarn --version
1.22.4
もしも、Node.js がインストールされていないと...
Yarn のインストールで node コマンドが実行されない。
$ scoop install yarn
Installing 'yarn' (1.22.4) [64bit] yarn-1.22.4.msi (1.6 MB) [====================================================================================] 100% Checking hash of yarn-1.22.4.msi ... ok. Extracting yarn-1.22.4.msi ... done. Linking ~\scoop\apps\yarn\current => ~\scoop\apps\yarn\1.22.4 Persisting cache Persisting mirror Persisting global Running post-install script... 'node' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 'node' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 'node' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 'node' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 'yarn' (1.22.4) was installed successfully! 'yarn' suggests installing 'nodejs' or 'nodejs-lts' or 'nvm' or 'nvs'.
Yarn / npm の CLI コマンドの比較
| Yarn | npm (v5) | 補足 |
|---|---|---|
| yarn init | npm init | 管理を開始(インタラクティブ) |
| yarn | npm init -y | 管理を開始(即時) |
| yarn install | npm install | 記録されたパッケージをインストール |
| yarn add [package@version] | npm install –save [package@version] | インストール + 記録 |
| yarn add –dev [package] | npm install –save-dev [package] | 開発環境にのみインストール + 記録 |
| yarn global add [package] | npm install –global [package] | グローバルにインストール |
| yarn remove [package] | npm uninstall –save [package] | パッケージと記録を削除 |
| yarn remove [package] | npm uninstall –save-dev [package] | 開発環境のパッケージと記録を削除 |
| yarn global upgrade | npm update –global | グローバルのパッケージ全体を更新 |
| yarn upgrade | rm -rf node_modules && npm install | ローカルのパッケージ全体の更新 |
| yarn upgrade [package] | npm update [package] | ローカルのパッケージの更新 |
| yarn cache clean | npm cache clean | キャッシュクリア |
| yarn info [package] | npm info [package] | パッケージ情報の表示 |
| yarn outdated | npm outdated | 古いパッケージ一覧の表示 |
| yarn run [script] | npm run [script] | package.json内のscriptに定義されたスクリプトを実行 |
| なし？ yarn info [package]で一応調べられる | npm search [package] | パッケージのバージョン一覧の取得 |
| yarn add | npm install | |
| yarn add –flat | (N/A) | |
| yarn add –har | (N/A) | |
| yarn add –no-lockfile | npm install –no-package-lock | |
| yarn add –pure-lockfile | (N/A) | |
| yarn add [package] | npm install [package] –save | |
| yarn add [package] –dev | npm install [package] –save-dev | |
| yarn add [package] –peer | (N/A) | |
| yarn add [package] –optional | npm install [package] –save-optional | |
| yarn add [package] –exact | npm install [package] –save-exact | |
| yarn add [package] –tilde | (N/A) | |
| yarn global add [package] | npm install [package] –global | |
| yarn global upgrade | npm update –global | |
| yarn add –force | npm rebuild | |
| yarn remove [package] | npm uninstall [package] | |
| yarn cache clean [package] | npm cache clean | |
| yarn upgrade | rm -rf node_modules && npm install | |
| yarn version –major | npm version major | |
| yarn version –minor | npm version minor | |
| yarn version –patch | npm version patch |
Yarn による Vue.js アプリ開発
vue-cli のインストール
$ yarn add @vue/cli
yarn add v1.22.4 info No lockfile found. [1/4] Resolving packages... warning @vue/cli > @vue/cli-shared-utils > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. warning @vue/cli > jscodeshift > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated warning @vue/cli > jscodeshift > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated [2/4] Fetching packages... info fsevents@1.2.13: The platform "win32" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning "@vue/cli > jscodeshift@0.9.0" has unmet peer dependency "@babel/preset-env@^7.1.6". [4/4] Building fresh packages... success Saved lockfile. success Saved 634 new dependencies. info Direct dependencies └─ @vue/cli@4.4.4 info All dependencies ├─ @akryum/winattr@3.0.0 ├─ @apollo/federation@0.16.2 ├─ @apollo/protobufjs@1.0.4 ├─ @apollographql/graphql-language-service-interface@2.0.2 ├─ @apollographql/graphql-language-service-parser@2.0.2 ├─ @apollographql/graphql-language-service-utils@2.0.2 ├─ @babel/core@7.10.2 ├─ @babel/helper-get-function-arity@7.10.1 ├─ @babel/helper-module-imports@7.10.1 ├─ @babel/helpers@7.10.1 ├─ @babel/highlight@7.10.1 ├─ @babel/parser@7.10.2 ├─ @babel/plugin-proposal-class-properties@7.10.1 ├─ @babel/plugin-proposal-nullish-coalescing-operator@7.10.1 ├─ @babel/plugin-proposal-optional-chaining@7.10.1 ├─ @babel/plugin-syntax-flow@7.10.1 ├─ @babel/plugin-syntax-nullish-coalescing-operator@7.8.3 ├─ @babel/plugin-syntax-optional-chaining@7.8.3 ├─ @babel/plugin-syntax-typescript@7.10.1 ├─ @babel/plugin-transform-flow-strip-types@7.10.1 ├─ @babel/plugin-transform-modules-commonjs@7.10.1 ├─ @babel/plugin-transform-typescript@7.10.1 ├─ @babel/preset-flow@7.10.1 ├─ @babel/preset-typescript@7.10.1 ├─ @babel/register@7.10.1 ├─ @babel/runtime@7.10.2 ├─ @endemolshinegroup/cosmiconfig-typescript-loader@1.0.1 ├─ @hapi/address@2.1.4 ├─ @hapi/bourne@1.3.2 ├─ @hapi/hoek@8.5.1 ├─ @hapi/joi@15.1.1 ├─ @hapi/topo@3.1.6 ├─ @mrmlnc/readdir-enhanced@2.2.1 ├─ @nodelib/fs.stat@1.1.3 ├─ @oclif/color@0.0.0 ├─ @oclif/config@1.15.1 ├─ @oclif/parser@3.8.5 ├─ @oclif/plugin-autocomplete@0.2.0 ├─ @oclif/plugin-help@3.1.0 ├─ @oclif/plugin-not-found@1.2.4 ├─ @oclif/plugin-plugins@1.7.9 ├─ @oclif/plugin-warn-if-update-available@1.7.0 ├─ @protobufjs/aspromise@1.1.2 ├─ @protobufjs/base64@1.1.2 ├─ @protobufjs/codegen@2.0.4 ├─ @protobufjs/eventemitter@1.1.0 ├─ @protobufjs/fetch@1.1.0 ├─ @protobufjs/float@1.0.2 ├─ @protobufjs/path@1.1.2 ├─ @protobufjs/pool@1.1.0 ├─ @protobufjs/utf8@1.1.0 ├─ @samverschueren/stream-to-observable@0.3.0 ├─ @sindresorhus/is@0.7.0 ├─ @types/accepts@1.3.5 ├─ @types/color-name@1.1.1 ├─ @types/content-disposition@0.5.3 ├─ @types/cookies@0.7.4 ├─ @types/cors@2.8.6 ├─ @types/fs-capacitor@2.0.0 ├─ @types/glob@7.1.2 ├─ @types/graphql-upload@8.0.3 ├─ @types/http-assert@1.5.1 ├─ @types/koa-compose@3.2.5 ├─ @types/long@4.0.1 ├─ @types/mime@2.0.2 ├─ @types/minimatch@3.0.3 ├─ @types/node-fetch@2.5.7 ├─ @types/normalize-package-data@2.4.0 ├─ @types/range-parser@1.2.3 ├─ @types/ws@7.2.5 ├─ @types/zen-observable@0.8.0 ├─ @vue/cli-ui-addon-webpack@4.4.4 ├─ @vue/cli-ui-addon-widgets@4.4.4 ├─ @vue/cli-ui@4.4.4 ├─ @vue/cli@4.4.4 ├─ @wry/context@0.4.4 ├─ @wry/equality@0.1.11 ├─ abbrev@1.1.1 ├─ accepts@1.3.7 ├─ aggregate-error@3.0.1 ├─ ajv@6.12.2 ├─ ansi-align@3.0.0 ├─ ansi-escapes@3.2.0 ├─ ansicolors@0.3.2 ├─ any-observable@0.3.0 ├─ anymatch@2.0.0 ├─ apollo-cache-control@0.11.0 ├─ apollo-cache-inmemory@1.6.6 ├─ apollo-cache@1.3.5 ├─ apollo-client@2.6.10 ├─ apollo-codegen-flow@0.35.3 ├─ apollo-codegen-scala@0.36.3 ├─ apollo-codegen-swift@0.37.3 ├─ apollo-codegen-typescript@0.37.3 ├─ apollo-datasource@0.7.1 ├─ apollo-engine-reporting@2.0.1 ├─ apollo-link-context@1.0.20 ├─ apollo-link-error@1.1.13 ├─ apollo-link-http@1.5.17 ├─ apollo-link-persisted-queries@0.2.2 ├─ apollo-link-state@0.4.2 ├─ apollo-link-ws@1.0.20 ├─ apollo-server-core@2.14.4 ├─ apollo-server-errors@2.4.1 ├─ apollo-server-express@2.14.4 ├─ apollo-tracing@0.11.0 ├─ apollo-upload-client@11.0.0 ├─ apollo@2.28.3 ├─ archive-type@4.0.0 ├─ arg@4.1.3 ├─ argparse@1.0.10 ├─ arr-flatten@1.1.0 ├─ array-flatten@1.1.1 ├─ array-union@1.0.2 ├─ array-uniq@1.0.3 ├─ asn1@0.2.4 ├─ assign-symbols@1.0.0 ├─ astral-regex@1.0.0 ├─ async-each@1.0.3 ├─ async-retry@1.3.1 ├─ async@2.6.3 ├─ atob@2.1.2 ├─ await-to-js@2.1.1 ├─ aws-sign2@0.7.0 ├─ aws4@1.10.0 ├─ babel-core@7.0.0-bridge.0 ├─ babel-plugin-dynamic-import-node@2.3.3 ├─ backo2@1.0.2 ├─ balanced-match@1.0.0 ├─ base@0.11.2 ├─ base64-js@1.3.1 ├─ bcrypt-pbkdf@1.0.2 ├─ binary-extensions@1.13.1 ├─ bl@1.2.2 ├─ body-parser@1.19.0 ├─ boxen@4.2.0 ├─ brace-expansion@1.1.11 ├─ braces@2.3.2 ├─ buffer-alloc-unsafe@1.1.0 ├─ buffer-alloc@1.2.0 ├─ buffer-crc32@0.2.13 ├─ buffer-fill@1.0.0 ├─ buffer@5.6.0 ├─ builtins@1.0.3 ├─ busboy@0.3.1 ├─ byline@5.0.0 ├─ cache-base@1.0.1 ├─ cacheable-request@2.1.4 ├─ call-me-maybe@1.0.1 ├─ caller-callsite@2.0.0 ├─ caller-path@2.0.0 ├─ callsites@2.0.0 ├─ camelcase@5.3.1 ├─ capture-stack-trace@1.0.1 ├─ caseless@0.12.0 ├─ caw@2.0.1 ├─ chardet@0.7.0 ├─ cheerio@1.0.0-rc.3 ├─ chokidar@2.1.8 ├─ ci-info@1.6.0 ├─ class-utils@0.3.6 ├─ cli-boxes@2.2.0 ├─ cli-cursor@2.1.0 ├─ cli-progress@3.8.2 ├─ cli-spinners@2.3.0 ├─ cli-truncate@0.2.1 ├─ cli-width@2.2.1 ├─ clipboard@2.0.6 ├─ clone-response@1.0.2 ├─ clone@2.1.2 ├─ cmd-shim@3.0.3 ├─ code-point-at@1.1.0 ├─ collection-visit@1.0.0 ├─ color-convert@1.9.3 ├─ color-name@1.1.3 ├─ combined-stream@1.0.8 ├─ commander@2.20.3 ├─ commondir@1.0.1 ├─ concat-map@0.0.1 ├─ config-chain@1.1.12 ├─ configstore@3.1.2 ├─ constant-case@2.0.0 ├─ content-disposition@0.5.3 ├─ content-type@1.0.4 ├─ convert-source-map@1.7.0 ├─ cookie-signature@1.0.6 ├─ cookie@0.4.0 ├─ copy-descriptor@0.1.1 ├─ core-js@3.6.5 ├─ core-util-is@1.0.2 ├─ cors@2.8.5 ├─ cosmiconfig@5.2.1 ├─ create-error-class@3.0.2 ├─ crypto-random-string@1.0.0 ├─ css-select@1.2.0 ├─ css-what@2.1.3 ├─ cssfilter@0.0.10 ├─ csv-parser@1.12.1 ├─ dashdash@1.14.1 ├─ date-fns@1.30.1 ├─ de-indent@1.0.2 ├─ decompress-response@3.3.0 ├─ decompress-tar@4.1.1 ├─ decompress-tarbz2@4.1.1 ├─ decompress-targz@4.1.1 ├─ decompress-unzip@4.0.1 ├─ decompress@4.2.1 ├─ deep-extend@0.6.0 ├─ deepmerge@4.2.2 ├─ defaults@1.0.3 ├─ delayed-stream@1.0.0 ├─ delegate@3.2.0 ├─ deprecated-decorator@0.1.6 ├─ destroy@1.0.4 ├─ detect-indent@6.0.0 ├─ dicer@0.3.0 ├─ diff@4.0.2 ├─ dir-glob@2.2.2 ├─ domhandler@2.4.2 ├─ domutils@1.5.1 ├─ dot-case@2.1.1 ├─ dot-prop@4.2.0 ├─ dotenv@8.2.0 ├─ download-git-repo@3.0.2 ├─ download@7.1.0 ├─ easy-stack@1.0.0 ├─ ecc-jsbn@0.1.2 ├─ ee-first@1.1.1 ├─ ejs@2.7.4 ├─ elegant-spinner@1.0.1 ├─ emoji-regex@7.0.3 ├─ end-of-stream@1.4.4 ├─ env-ci@3.2.2 ├─ envinfo@7.5.1 ├─ es-to-primitive@1.2.1 ├─ esm@3.2.25 ├─ event-pubsub@4.3.0 ├─ eventemitter3@3.1.2 ├─ exec-sh@0.2.2 ├─ expand-brackets@2.1.4 ├─ expand-tilde@2.0.2 ├─ express-history-api-fallback@2.2.1 ├─ ext-list@2.2.2 ├─ ext-name@5.0.0 ├─ extend@3.0.2 ├─ external-editor@3.1.0 ├─ extglob@2.0.4 ├─ extract-files@5.0.1 ├─ extsprintf@1.3.0 ├─ fast-deep-equal@3.1.3 ├─ fast-glob@2.2.7 ├─ fast-levenshtein@2.0.6 ├─ fd-slicer@1.1.0 ├─ figures@3.2.0 ├─ filename-reserved-regex@2.0.0 ├─ filenamify@2.1.0 ├─ fill-range@4.0.0 ├─ finalhandler@1.1.2 ├─ find-cache-dir@2.1.0 ├─ find-up@3.0.0 ├─ fkill@6.2.0 ├─ flow-parser@0.127.0 ├─ for-in@1.0.2 ├─ forever-agent@0.6.1 ├─ form-data@2.3.3 ├─ forwarded@0.1.2 ├─ fs-capacitor@2.0.4 ├─ fs-constants@1.0.0 ├─ fs-exists-sync@0.1.0 ├─ fswin@2.17.1227 ├─ gaze@1.1.3 ├─ generate-function@1.1.0 ├─ generate-object-property@1.2.0 ├─ gensync@1.0.0-beta.1 ├─ get-proxy@2.1.0 ├─ get-value@2.0.6 ├─ getpass@0.1.7 ├─ git-clone@0.1.0 ├─ git-config-path@1.0.1 ├─ git-parse@1.0.4 ├─ git-rev-sync@2.0.0 ├─ git-up@4.0.1 ├─ git-url-parse@11.1.2 ├─ glob-to-regexp@0.3.0 ├─ glob@7.1.6 ├─ globals@11.12.0 ├─ globule@1.3.2 ├─ good-listener@1.2.2 ├─ got@8.3.2 ├─ graceful-readlink@1.0.1 ├─ graphql-anywhere@4.2.7 ├─ graphql-extensions@0.12.3 ├─ graphql-type-json@0.3.2 ├─ graphql-upload@8.1.0 ├─ growly@1.3.0 ├─ har-schema@2.0.0 ├─ har-validator@5.1.3 ├─ has-ansi@2.0.0 ├─ has-flag@3.0.0 ├─ has-symbol-support-x@1.4.2 ├─ has-to-string-tag-x@1.4.1 ├─ has-value@1.0.0 ├─ has@1.0.3 ├─ hash.js@1.1.7 ├─ he@1.2.0 ├─ header-case@1.0.1 ├─ homedir-polyfill@1.0.3 ├─ hosted-git-info@2.8.8 ├─ htmlparser2@3.10.1 ├─ http-cache-semantics@3.8.1 ├─ http-signature@1.2.0 ├─ human-signals@1.1.1 ├─ ieee754@1.1.13 ├─ ignore-by-default@1.0.1 ├─ ignore@4.0.6 ├─ import-fresh@2.0.0 ├─ import-global@0.1.0 ├─ import-lazy@2.1.0 ├─ imurmurhash@0.1.4 ├─ ini@1.3.5 ├─ inquirer@7.1.0 ├─ interpret@1.4.0 ├─ into-stream@3.1.0 ├─ ipaddr.js@1.9.1 ├─ is-accessor-descriptor@1.0.0 ├─ is-arrayish@0.2.1 ├─ is-binary-path@1.0.1 ├─ is-callable@1.2.0 ├─ is-ci@1.2.1 ├─ is-data-descriptor@1.0.0 ├─ is-date-object@1.0.2 ├─ is-descriptor@1.0.2 ├─ is-directory@0.3.1 ├─ is-docker@2.0.0 ├─ is-extglob@2.1.1 ├─ is-installed-globally@0.1.0 ├─ is-lower-case@1.1.3 ├─ is-natural-number@4.0.1 ├─ is-npm@1.0.0 ├─ is-obj@1.0.1 ├─ is-object@1.0.1 ├─ is-observable@1.1.0 ├─ is-path-inside@1.0.1 ├─ is-plain-object@2.0.4 ├─ is-property@1.0.2 ├─ is-redirect@1.0.0 ├─ is-regex@1.1.0 ├─ is-retry-allowed@1.2.0 ├─ is-stream@1.1.0 ├─ is-symbol@1.0.3 ├─ is-typedarray@1.0.0 ├─ is-upper-case@1.1.2 ├─ is-windows@1.0.2 ├─ isarray@1.0.0 ├─ isbinaryfile@4.0.6 ├─ isstream@0.1.2 ├─ iterall@1.3.0 ├─ java-properties@1.0.2 ├─ js-message@1.0.5 ├─ js-queue@2.0.0 ├─ js-tokens@4.0.0 ├─ jscodeshift@0.9.0 ├─ jsesc@2.5.2 ├─ json-buffer@3.0.0 ├─ json-schema-traverse@0.4.1 ├─ json-schema@0.2.3 ├─ json-stringify-safe@5.0.1 ├─ json5@2.1.3 ├─ jsprim@1.4.1 ├─ keyv@3.0.0 ├─ kind-of@3.2.2 ├─ latest-version@3.1.0 ├─ launch-editor@2.2.1 ├─ leven@3.1.0 ├─ lines-and-columns@1.1.6 ├─ listr-silent-renderer@1.1.1 ├─ listr-update-renderer@0.5.0 ├─ listr-verbose-renderer@0.5.0 ├─ listr@0.14.3 ├─ load-json-file@5.3.0 ├─ locate-path@3.0.0 ├─ lodash.clonedeep@4.5.0 ├─ lodash.debounce@4.0.8 ├─ lodash.get@4.4.2 ├─ lodash.identity@3.0.0 ├─ lodash.pickby@4.6.0 ├─ lodash.sortby@4.7.0 ├─ lodash.templatesettings@4.2.0 ├─ lodash.xorby@4.7.0 ├─ lodash@4.17.15 ├─ log-symbols@2.2.0 ├─ log-update@2.3.0 ├─ loglevel@1.6.8 ├─ long@4.0.0 ├─ lowdb@1.0.0 ├─ lower-case-first@1.0.2 ├─ lru-cache@5.1.1 ├─ make-error@1.3.6 ├─ map-visit@1.0.0 ├─ media-typer@0.3.0 ├─ merge-descriptors@1.0.1 ├─ merge-stream@2.0.0 ├─ merge@1.2.1 ├─ merge2@1.4.1 ├─ methods@1.1.2 ├─ mime-db@1.44.0 ├─ mime@1.6.0 ├─ mimic-fn@2.1.0 ├─ minimalistic-assert@1.0.1 ├─ minimatch@3.0.4 ├─ mixin-deep@1.3.2 ├─ mkdirp@0.5.5 ├─ mute-stream@0.0.8 ├─ nanoid@2.1.11 ├─ nanomatch@1.2.13 ├─ natural-orderby@2.0.3 ├─ ndjson@1.5.0 ├─ neat-csv@2.1.0 ├─ negotiator@0.6.2 ├─ neo-async@2.6.1 ├─ nice-try@1.0.5 ├─ node-dir@0.1.17 ├─ node-fetch@2.6.0 ├─ node-modules-regexp@1.0.0 ├─ node-notifier@6.0.0 ├─ nodemon@1.19.4 ├─ nopt@1.0.10 ├─ normalize-package-data@2.5.0 ├─ normalize-path@3.0.0 ├─ normalize-url@2.0.1 ├─ npm-conf@1.1.3 ├─ nth-check@1.0.2 ├─ number-is-nan@1.0.1 ├─ oauth-sign@0.9.0 ├─ object-copy@0.1.0 ├─ object-inspect@1.7.0 ├─ object-keys@1.1.1 ├─ object-path@0.11.4 ├─ object-treeify@1.1.25 ├─ object.getownpropertydescriptors@2.1.0 ├─ once@1.4.0 ├─ open@6.4.0 ├─ optimism@0.10.3 ├─ ora@3.4.0 ├─ os-tmpdir@1.0.2 ├─ p-cancelable@0.4.1 ├─ p-event@2.3.1 ├─ p-is-promise@1.1.0 ├─ p-limit@2.3.0 ├─ p-locate@3.0.0 ├─ p-map@2.1.0 ├─ p-try@2.2.0 ├─ package-json@4.0.1 ├─ param-case@2.1.1 ├─ parse-git-config@2.0.3 ├─ parse-passwd@1.0.0 ├─ parse-path@4.0.1 ├─ parse-url@5.0.1 ├─ parse5@3.0.3 ├─ pascal-case@2.0.1 ├─ pascalcase@0.1.1 ├─ password-prompt@1.1.2 ├─ path-case@2.1.1 ├─ path-dirname@1.0.2 ├─ path-exists@3.0.0 ├─ path-is-inside@1.0.2 ├─ path-parse@1.0.6 ├─ path-to-regexp@0.1.7 ├─ path-type@3.0.0 ├─ pend@1.2.0 ├─ performance-now@2.1.0 ├─ pid-from-port@1.1.3 ├─ pinkie-promise@2.0.1 ├─ pinkie@2.0.4 ├─ pirates@4.0.1 ├─ pkg-dir@3.0.0 ├─ portfinder@1.0.26 ├─ posix-character-classes@0.1.1 ├─ prismjs@1.20.0 ├─ process-exists@3.1.0 ├─ process-nextick-args@2.0.1 ├─ proto-list@1.2.4 ├─ proxy-addr@2.0.6 ├─ ps-list@4.1.0 ├─ pseudomap@1.0.2 ├─ psl@1.8.0 ├─ pstree.remy@1.1.8 ├─ punycode@2.1.1 ├─ query-string@5.1.1 ├─ raw-body@2.4.0 ├─ rc@1.2.8 ├─ read-pkg@5.2.0 ├─ readable-stream@2.3.7 ├─ readdirp@2.2.1 ├─ recast@0.18.10 ├─ rechoir@0.6.2 ├─ redeyed@2.1.1 ├─ regenerator-runtime@0.13.5 ├─ registry-auth-token@3.4.0 ├─ registry-url@3.1.0 ├─ remove-trailing-separator@1.1.0 ├─ repeat-element@1.1.3 ├─ request-promise-core@1.1.3 ├─ request-promise-native@1.0.8 ├─ request@2.88.2 ├─ resolve-from@3.0.0 ├─ resolve-url@0.2.1 ├─ resolve@1.17.0 ├─ responselike@1.0.2 ├─ restore-cursor@2.0.0 ├─ ret@0.1.15 ├─ retry@0.12.0 ├─ rimraf@3.0.2 ├─ rss-parser@3.8.0 ├─ run-async@2.4.1 ├─ rxjs@6.5.5 ├─ safer-buffer@2.1.2 ├─ sax@1.2.4 ├─ sec@1.0.0 ├─ seek-bzip@1.0.5 ├─ select@1.1.2 ├─ semver-diff@2.1.0 ├─ semver@5.7.1 ├─ sentence-case@2.1.1 ├─ serve-static@1.14.1 ├─ set-value@2.0.1 ├─ shebang-regex@1.0.0 ├─ shell-quote@1.7.2 ├─ shelljs@0.7.7 ├─ shellwords@0.1.1 ├─ slash@3.0.0 ├─ slice-ansi@2.1.0 ├─ snapdragon-node@2.1.1 ├─ snapdragon-util@3.0.1 ├─ sort-keys-length@1.0.1 ├─ sort-keys@1.1.2 ├─ source-map-resolve@0.5.3 ├─ source-map-support@0.5.19 ├─ source-map-url@0.4.0 ├─ source-map@0.5.7 ├─ spdx-correct@3.1.1 ├─ spdx-exceptions@2.3.0 ├─ split-string@3.1.0 ├─ split2@2.2.0 ├─ sprintf-js@1.0.3 ├─ sshpk@1.16.1 ├─ static-extend@0.1.2 ├─ stealthy-require@1.1.1 ├─ steno@0.4.4 ├─ streamsearch@0.1.2 ├─ strict-uri-encode@1.1.0 ├─ string_decoder@1.1.1 ├─ string.prototype.trimend@1.0.1 ├─ string.prototype.trimstart@1.0.1 ├─ strip-bom@3.0.0 ├─ strip-dirs@2.1.0 ├─ strip-final-newline@2.0.0 ├─ strip-json-comments@2.0.1 ├─ strip-outer@1.0.1 ├─ subscriptions-transport-ws@0.9.16 ├─ supports-color@5.5.0 ├─ swap-case@1.1.2 ├─ symbol-observable@1.2.0 ├─ table@5.4.6 ├─ tar-stream@1.6.2 ├─ taskkill@3.1.0 ├─ tasklist@3.1.1 ├─ temp@0.8.4 ├─ term-size@2.2.0 ├─ through@2.3.8 ├─ timed-out@4.0.1 ├─ tiny-emitter@2.1.0 ├─ title-case@2.1.1 ├─ tmp@0.0.33 ├─ to-buffer@1.1.1 ├─ to-fast-properties@2.0.0 ├─ to-object-path@0.3.0 ├─ to-regex-range@2.1.1 ├─ touch@3.1.0 ├─ tough-cookie@2.5.0 ├─ treeify@1.1.0 ├─ trim-repeated@1.0.0 ├─ ts-node@8.10.2 ├─ tty@1.0.1 ├─ tweetnacl@0.14.5 ├─ type-fest@0.11.0 ├─ type-is@1.6.18 ├─ typescript@3.9.5 ├─ unbzip2-stream@1.4.3 ├─ undefsafe@2.0.3 ├─ union-value@1.0.1 ├─ unique-string@1.0.0 ├─ unpipe@1.0.0 ├─ unset-value@1.0.0 ├─ unzip-response@2.0.1 ├─ upath@1.2.0 ├─ update-notifier@2.5.0 ├─ upper-case@1.1.3 ├─ uri-js@4.2.2 ├─ urix@0.1.0 ├─ url-parse-lax@3.0.0 ├─ use@3.1.1 ├─ util-deprecate@1.0.2 ├─ util.promisify@1.0.1 ├─ utils-merge@1.0.1 ├─ uuid@3.4.0 ├─ validate-npm-package-license@3.0.4 ├─ validate-npm-package-name@3.0.0 ├─ vary@1.1.2 ├─ verror@1.10.0 ├─ vscode-jsonrpc@4.0.0 ├─ vscode-languageserver-protocol@3.14.1 ├─ vscode-languageserver-types@3.14.0 ├─ vscode-languageserver@5.2.1 ├─ vue-cli-plugin-apollo@0.21.3 ├─ vue-jscodeshift-adapter@2.1.0 ├─ vue-sfc-descriptor-to-string@1.0.0 ├─ vue-template-compiler@2.6.11 ├─ vue@2.6.11 ├─ watch@1.0.2 ├─ wcwidth@1.0.1 ├─ widest-line@2.0.1 ├─ write-file-atomic@2.4.3 ├─ ws@5.2.2 ├─ xml2js@0.4.23 ├─ xmlbuilder@11.0.1 ├─ xss@1.0.7 ├─ xtend@4.0.2 ├─ yallist@3.1.1 ├─ yaml-front-matter@3.4.1 ├─ yarn@1.22.4 ├─ yauzl@2.10.0 ├─ yn@3.1.1 └─ zen-observable-ts@0.8.21 Done in 135.57s.
vue-cli の動作確認
$ yarn run vue
yarn run v1.22.4 warning package.json: No license field $ C:\My_Projects\vuejs_app\node_modules\.bin\vue Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: create [options] <app-name> create a new project powered by vue-cli-service add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service serve [options] [entry] serve a .js or .vue file in development mode with zero config build [options] [entry] build a .js or .vue file in production mode with zero config ui [options] start and open the vue-cli ui init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init) config [options] [value] inspect and modify the config outdated [options] (experimental) check for outdated vue cli service / plugins upgrade [options] [plugin-name] (experimental) upgrade vue cli service / plugins migrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugin info print debugging information about your environment Run vue <command> --help for detailed usage of given command. Done in 1.91s.
vue-cli による Vue.js プロジェクトの作成
$ yarn run vue create vue_project
矢印キー (↑ or ↓) で Manually select features を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: (Use arrow keys) default (babel, eslint) > Manually select features
矢印キー (↑ or ↓) で該当項目を選択して、<space> で選択/選択解除、<a> ですべてをトグル、<i> で選択を反転する。
ここでは Progressive Web App (PWA) Support 以外をすべて選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) (*) Babel (*) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors (*) Linter / Formatter (*) Unit Testing >(*) E2E Testing
クラススタイルでコンポーネントを記述する場合は y を入力して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? (Y/n) y
TypeScript と一緒に Babel を使用する場合は y を入力して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y
router に履歴モードを使用する場合は y を入力して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
矢印キー (↑ or ↓) で CSS プリプロセッサを選択する。
ここでは Sass/SCSS (with node-sass) を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) Sass/SCSS (with dart-sass) > Sass/SCSS (with node-sass) Less Stylus
矢印キー (↑ or ↓) で linter / formatter を選択する。
ここでは TSLint (deprecated) を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: (Use arrow keys) ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier > TSLint (deprecated)
矢印キー (↑ or ↓) で該当項目を選択して、<space> で選択/選択解除、<a> ですべてをトグル、<i> で選択を反転する。
Lint の実行タイミングを設定する。
Lint on save (保存時に Lint を実行)
Lint and fix on commit (コミット時の Lint 実行)
ここでは Lint on save を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
矢印キー (↑ or ↓) で該当項目を選択する。
Unit テスト用パッケージを選択する。
ここでは Mocha + Chai を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: Lint on save ? Pick a unit testing solution: (Use arrow keys) > Mocha + Chai Jest
矢印キー (↑ or ↓) で該当項目を選択する。
E2E テスト用パッケージを選択する。
ここでは Cypress (Chrome only) を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Mocha ? Pick an E2E testing solution: (Use arrow keys) > Cypress (Chrome only) Nightwatch (WebDriver-based)
矢印キー (↑ or ↓) で該当項目を選択する。
Babel、ESLint、etc… の設定をどこに残すか？を選択する。(専用の設定ファイル / package.json)
ここでは package.json を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Mocha ? Pick an E2E testing solution: Cypress ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) In dedicated config files > In package.json
これを将来のプロジェクトのプリセットとして保存する場合は y を入力して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Mocha ? Pick an E2E testing solution: Cypress ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? (y/N) y
プリセットに名前を付けて保存する。
ここでは vue_project_preset と入力して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Mocha ? Pick an E2E testing solution: Cypress ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? Yes ? Save preset as: vue_project_preset
矢印キー (↑ or ↓) で該当項目を選択する。
依存関係をインストールするときに使用するパッケージマネージャーを選択する。
ここでは Use Yarn を選択して <enter> を押す。
Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Mocha ? Pick an E2E testing solution: Cypress ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? Yes ? Save preset as: vue_project_preset ? Pick the package manager to use when installing dependencies: (Use arrow keys) > Use Yarn Use NPM
プロジェクトの作成処理が行われる。
Vue CLI v4.4.4 ✨ Creating project in C:\My_Projects\vuejs_app\vue_project. � Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "win32" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "win32" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. ⚓ Running completion hooks... � Generating README.md... � Successfully created project vue_project. � Get started with the following commands: $ cd vue_project $ yarn serve WARN Skipped git commit due to missing username and email in git config. You will need to perform the initial commit yourself. Done in 8558.43s.
Vue.js プロジェクトの実行
プロジェクトのディレクトリに入る。
$ cd vue_project
プロジェクトの実行。
$ yarn serve
yarn run v1.22.4 warning ..\package.json: No license field $ vue-cli-service serve INFO Starting development server... Starting type checking and linting service... Using 1 worker with 2048MB memory limit 98% after emitting CopyPlugin DONE Compiled successfully in 15977ms 7:29:54 WARNING in C:/My_Projects/vuejs_app/vue_project/src/views/Home.vue(10,53): 10:53 Missing semicolon 8 | <script> 9 | // @ is an alias to /src > 10 | import HelloWorld from '@/components/HelloWorld.vue' | ^ 11 | 12 | export default { 13 | name: 'Home', WARNING in C:/My_Projects/vuejs_app/vue_project/src/views/Home.vue(15,15): 15:15 Missing trailing comma 13 | name: 'Home', 14 | components: { > 15 | HelloWorld | ^ 16 | } 17 | } 18 | </script> WARNING in C:/My_Projects/vuejs_app/vue_project/src/views/Home.vue(16,4): 16:4 Missing trailing comma 14 | components: { 15 | HelloWorld > 16 | } | ^ 17 | } 18 | </script> 19 | WARNING in C:/My_Projects/vuejs_app/vue_project/src/views/Home.vue(17,2): 17:2 Missing semicolon 15 | HelloWorld 16 | } > 17 | } | ^ 18 | </script> 19 | No type errors found Version: typescript 3.9.5, tslint 5.20.1 Time: 15474ms App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run yarn build.
http://localhost:8080/ にアクセスする。
メモ
Compass を有効にする。
$ yarn add compass-mixins
yarn add v1.22.4 warning ..\package.json: No license field [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "win32" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "win32" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning "@vue/cli-plugin-e2e-cypress > eslint-plugin-cypress@2.11.1" has unmet peer dependency "eslint@>= 3.2.1". warning "@vue/cli-plugin-unit-mocha > mochapack@1.1.15" has unmet peer dependency "webpack@^4.0.0". warning " > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0". [4/4] Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ compass-mixins@0.12.10 info All dependencies └─ compass-mixins@0.12.10 Done in 24.40s.
参考文献
javascript/yarn.txt · 最終更新: 2020/06/26 08:09 by ともやん
特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
