触りだけ
目次みたいなもんである
プロジェクトを作成すると自動で生成される。
vue create test{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}これ単体だとわけがわからないけど、作例とか見てるとなんとなく分かってくる。
「scripts」はコマンドのショートカットだとか、「devDependencies」は開発環境に限るインストールだとか、そんな感じで。
活用：インストール関係
package.jsonの中身はインストールしたりアンインストールしたりすると自動で更新される。基本的に手動でいじるところはない。逆に言えば、scriptsで特定の動作を設定したいときにいじるくらい。
そんな感じで、だから他所の環境を真似たい場合はこれを見るとざっくり理解できる。
dependenciesへのインストール
ここに追加したいときはこんな書き方。
npm install firebaseui「-save」とか入れてるところもあるけどこれでやれてる。
devDependenciesへのインストール
ここに追加したいときはこんな書き方。
npm install -D firebaseui「-D」じゃなくて「-dev」でも良かったりする。
アンインストール
devも共通というか、一貫してこれ。
npm uninstall bootstrap例えばバージョンを間違えた場合、上書きはできないので一旦アンインストールしてからインストールする手順となる。
バージョン指定
インストールするバージョンを指定できる。
npm install bootstrap@4末尾に「@」とバージョンを付ける。
バージョン確認
インストール予定のもの、インストール済みのものなど何でもバージョン確認ができる。
活用：移植
package.jsonがあれば、他所で環境を構築できる。
- 作業ディレクトリを作る
- package.jsonを用意する
- 作業ディレクトリにpackage.jsonを入れる
- コンソールからインストールする
ちょっと具体的にいうと、以下のファイルをDLする。
[ダウンロードが見つかりません]中身はこれ。コピペでもいい。
{
"dependencies": {
"vue": "^3.2.37"
}
}C:\testでやるとする。
C:\testにpackage.jsonを入れる。
PowerShellを起動してC:\testに移動。
cd C:\test次にこれ。
npm installちょっと待てばC:\testにpackage.jsonの内容がインストールされる。
つまり
参考記事と同じ環境を真似たい場合、package.jsonの内容がわかればまんま使っちゃえばいいじゃん、ということになる。記事のバージョンが現行バージョンより古くて四苦八苦するくらいなら、同じく古いバージョンで作っちゃえよみたいな乱暴なことができる。
怖いですね。
コメント