ユーザ用ツール

サイト用ツール


サイドバー

Top

タグ

検索タグ

メニュー


変更履歴

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 よりも処理が高速である。

ヤ~ンばか~ん…😅💦💦💦 (※これはイメージです!!)
んふ~ん🎵 そこはお耳なの んふ~ん🎵…

林家木久蔵 / いやんばか~ん - YouTube より
いやんばか〜ん
いやんばか~ん/林家木久蔵 - 歌詞検索サービス 歌詞GET

インストール

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

Migrating from npm | Yarn より
yarnチートシート - Qiita より

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/ にアクセスする。
Vue.js App

メモ

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 ともやん