$ 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
$ pwd
/Users/nnagazum/DEV/g-link
$ bundle install
$ cd config/environments
$ cp smtp_settings.yml smtp_settings_ngzm.yml
$ be rails db:migrate
https://qiita.com/jnchito/items/0ee47108972a0e302caf
$ bundle outdated
$ bundle update
$ be rails s
$ 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
$ 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
$ 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
$ npm install --save-dev sass-loader@^7.0.0
$ npm install --save-dev sass node-sass fibers
$ npm run build
# 成功するはず!
$ pwd
/Users/nnagazum/DEV/g-link
$ cd public/
$ mkdir js
$ cd js
$ ln -s ../../client/dist/build.js .