Skip to content
This repository has been archived by the owner on Jul 15, 2022. It is now read-only.

Latest commit

 

History

History
281 lines (223 loc) · 6.11 KB

update_2020v001.md

File metadata and controls

281 lines (223 loc) · 6.11 KB

0. 準備

$ pwd
/Users/nnagazum/DEV/g-link

$ ruby --version
ruby 2.6.4p104 (2019-08-28 revision 67798) [x86_64-darwin18]

$ node -v
v12.9.0

$ npm -v
6.10.2

$ pyenv local 2.7.17

1. ruby + rails 環境インストール

$ pwd
/Users/nnagazum/DEV/g-link

$ bundle install

1-1. rails debug 環境 settings.yml を準備

$ cd config/environments
$ cp smtp_settings.yml smtp_settings_ngzm.yml

1-2. rails db migration

$ be rails db:migrate

1-3. bundle outdated + bundel update

https://qiita.com/jnchito/items/0ee47108972a0e302caf

$ bundle outdated


$ bundle update

1-4. rails サーバ起動テスト

$ be rails s

2. Vue.js 環境更新

2-1. package バージョンアップ

$ cd client

$ npm update

# これでエラーとなるので audit fix を実施
$ npm audit fix
$ npm audit fix --force

# さらに ncu で最新化する

$ ncu
Checking /Users/nnagazum/DEV/g-link/client/package.json
[====================] 24/24 100%

 axios                  ^0.18.0  →  ^0.19.2
 vue                    ^2.5.16  →  ^2.6.11
 vue-router              ^2.8.1  →   ^3.1.5
 vue-star-rating         ^1.6.0  →   ^1.6.1
 vuetify                ^1.0.17  →   ^2.2.6
 vuex                    ^2.5.0  →   ^3.1.2
 babel-loader            ^7.1.2  →   ^8.0.6
 babel-preset-env        ^1.6.1  →   ^1.7.0
 cross-env               ^5.0.5  →   ^6.0.3
 eslint                 ^4.19.1  →   ^6.8.0
 eslint-plugin-vue       ^4.5.0  →   ^6.1.2
 file-loader             ^1.1.4  →   ^5.0.2
 style-loader           ^0.21.0  →   ^1.1.3
 vue-loader             ^13.0.5  →  ^15.8.3
 vue-template-compiler  ^2.5.16  →  ^2.6.11
 webpack-dev-server     ^2.11.5  →  ^3.10.1

 Run ncu -u to upgrade package.json

$ ncu -u
Upgrading /Users/nnagazum/DEV/g-link/client/package.json
[====================] 24/24 100%

 axios                  ^0.18.0  →  ^0.19.2
 vue                    ^2.5.16  →  ^2.6.11
 vue-router              ^2.8.1  →   ^3.1.5
 vue-star-rating         ^1.6.0  →   ^1.6.1
 vuetify                ^1.0.17  →   ^2.2.6
 vuex                    ^2.5.0  →   ^3.1.2
 babel-loader            ^7.1.2  →   ^8.0.6
 babel-preset-env        ^1.6.1  →   ^1.7.0
 cross-env               ^5.0.5  →   ^6.0.3
 eslint                 ^4.19.1  →   ^6.8.0
 eslint-plugin-vue       ^4.5.0  →   ^6.1.2
 file-loader             ^1.1.4  →   ^5.0.2
 style-loader           ^0.21.0  →   ^1.1.3
 vue-loader             ^13.0.5  →  ^15.8.3
 vue-template-compiler  ^2.5.16  →  ^2.6.11
 webpack-dev-server     ^2.11.5  →  ^3.10.1

Run npm install to install new versions.

$ npm install

2-2. webpack 4 とか babel バージョンアップに伴う修正

$ vim webpack.config.js

# 変更点は以下の通り、結構たくさんありますよ。

$ git diff client/webpack.config.js

diff --git a/client/webpack.config.js b/client/webpack.config.js
index fd88a04..8721bc3 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -1,9 +1,10 @@
 const path = require('path');
 const webpack = require('webpack');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');

 module.exports = {
-  entry: ['babel-polyfill', './src/index.js'],
+  mode: 'development',
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
@@ -13,23 +14,54 @@ module.exports = {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        exclude: /node_modules/,
-        options: {
-          loaders: {
-          }
-          // other vue-loader options go here
-        }
+        use: [
+          {
+            loader: 'vue-loader',
+          },
+        ],
+        include: [/src/]
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        },
+        include: [/src/]
       },
       {
         test: /\.css$/,
-        loader: ['style-loader', 'css-loader'],
-        include: /node_modules\/vuetify\/dist/
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'vue-style-loader'
+          },
+          {
+            loader: 'css-loader'
+          }
+        ],
+        include: [/node_modules\/vuetify/, /src/]
+      },
+      {
+        test: /\.s(c|a)ss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            // Requires sass-loader@^7.0.0
+            options: {
+              implementation: require('sass'),
+              fiber: require('fibers'),
+              indentedSyntax: true // optional
+            },
+          },
+        ],
+        include: [/node_modules\/vuetify/]
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
@@ -41,10 +73,17 @@ module.exports = {
     ]
   },
   plugins: [
+    new VueLoaderPlugin(),
     new CopyWebpackPlugin([{
       from: path.resolve(__dirname, 'src', 'assets', 'index.html'),
     }]),
   ],
+  resolve: {
+    extensions: [".vue", ".js"],
+    alias: {
+      "vue$": "vue/dist/vue.esm.js"
+    }
+  },
   devServer: {
     contentBase: 'dist',
     port: 3000,

# さらに webpack-cli も必要となる
$ npm install --save-dev webpack-cli

2-3. babel

$ git rm .babelrc  <--- webpack.config.js に任せた

$ npm uninstall babel-core babel-preset-env babel-preset-stage-2 babel-preset-stage-3

$ npm install --save-dev @babel/core @babel/preset-env

2-4. vue や vuetify のバージョンアップに伴うパッケージの変更

$ npm install --save-dev sass-loader@^7.0.0

$ npm install --save-dev sass node-sass fibers

2-5. クライアントビルド

$ npm run build
# 成功するはず!

3. 実行環境整備

$ pwd
/Users/nnagazum/DEV/g-link

$ cd public/
$ mkdir js
$ cd js
$ ln -s ../../client/dist/build.js .

4. vuetify v2 対応コード修正

こちらを参照 https://vuetifyjs.com/ja/getting-started/quick-start