diff --git a/package.json b/package.json index 048feaf8a..16a99cef0 100644 --- a/package.json +++ b/package.json @@ -2,25 +2,28 @@ "private": true, "scripts": { "dev": "npm run development", - "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", - "watch": "npm run development -- --watch", - "watch-poll": "npm run watch -- --watch-poll", - "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", + "development": "mix", + "watch": "mix watch", + "watch-poll": "mix watch -- --watch-options-poll=1000", + "hot": "mix watch --hot", "prod": "npm run production", - "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" + "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "bootstrap": "^4.1.0", "cross-env": "^5.1", "jquery": "^3.2", - "laravel-mix": "^4.0.7", - "lodash": "^4.17.13", + "laravel-mix": "^6.0.6", + "lodash": "^4.17.19", "popper.js": "^1.12", + "postcss": "^8.1.14", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", - "vue-template-compiler": "^2.6.11" + "vue-loader": "^15.9.8", + "vue-template-compiler": "^2.6.11", + "webpack": "^5.58.2" } } diff --git a/resources/assets/css/app.css b/resources/assets/css/app.css new file mode 100644 index 000000000..e69de29bb diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 0371259c6..afc983e4d 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -1,19 +1,6 @@ - -/** - * First we will load all of this project's JavaScript dependencies which - * include Vue and Vue Resource. This gives a great starting point for - * building robust, powerful web applications using Vue and Laravel. - */ - require('./bootstrap'); -/** - * Next, we will create a fresh Vue application instance and attach it to - * the page. Then, you may begin adding components to this application - * or customize the JavaScript scaffolding to fit your unique needs. - */ - -window.Vue = require('vue'); +import Vue from 'vue'; const requireModulesVueFiles = (moduleVueFiles) => { moduleVueFiles.keys().map(key => { @@ -36,8 +23,6 @@ requireModulesVueFiles(require.context( /\.vue$/i )) -// Vue.component('example', require('./components/Example.vue').default); - const app = new Vue({ el: '#openclassify' }); diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js index 95b13800e..efda0c132 100644 --- a/resources/assets/js/bootstrap.js +++ b/resources/assets/js/bootstrap.js @@ -1,17 +1,5 @@ + window._ = require('lodash'); -window.Popper = require('popper.js').default; - -/** - * We'll load jQuery and the Bootstrap jQuery plugin which provides support - * for JavaScript based Bootstrap features such as modals and tabs. This - * code may be modified to fit the specific needs of your application. - */ - -try { - window.$j = window.jQuery = require('jquery'); - - require('bootstrap'); -} catch (e) {} /** * We'll load the axios HTTP library which allows us to easily issue requests @@ -23,27 +11,13 @@ window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; -/** - * Next we will register the CSRF Token as a common header with Axios so that - * all outgoing HTTP requests automatically have it attached. This is just - * a simple convenience so we don't have to attach every token manually. - */ - -let token = document.head.querySelector('meta[name="csrf-token"]'); - -if (token) { - window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; -} else { - console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); -} - /** * Echo exposes an expressive API for subscribing to channels and listening * for events that are broadcast by Laravel. Echo and event broadcasting * allows your team to easily build robust real-time web applications. */ -// import Echo from 'laravel-echo' +// import Echo from 'laravel-echo'; // window.Pusher = require('pusher-js'); @@ -51,5 +25,5 @@ if (token) { // broadcaster: 'pusher', // key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, -// encrypted: true +// forceTLS: true // }); diff --git a/resources/assets/js/components/Example.vue b/resources/assets/js/components/Example.vue deleted file mode 100644 index 067ef661b..000000000 --- a/resources/assets/js/components/Example.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss deleted file mode 100644 index adb76fab6..000000000 --- a/resources/assets/sass/app.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Functions -@import '~bootstrap/scss/_functions.scss'; - -// Variables -@import "variables"; - -// Bootstrap -@import "~bootstrap/scss/bootstrap"; diff --git a/resources/assets/sass/variables.scss b/resources/assets/sass/variables.scss deleted file mode 100644 index 4969cd5e3..000000000 --- a/resources/assets/sass/variables.scss +++ /dev/null @@ -1,37 +0,0 @@ - -// Body -$body-bg: #f5f8fa; - -// Borders -$laravel-border-color: darken($body-bg, 10%); -$list-group-border: $laravel-border-color; -$navbar-default-border: $laravel-border-color; -$panel-default-border: $laravel-border-color; -$panel-inner-border: $laravel-border-color; - -// Brands -$brand-primary: #3097D1; -$brand-info: #8eb4cb; -$brand-success: #2ab27b; -$brand-warning: #cbb956; -$brand-danger: #bf5329; - -// Typography -$font-family-sans-serif: "Raleway", sans-serif; -$font-size-base: 0.875rem; -$line-height-base: 1.6; -$text-color: #636b6f; - -// Navbar -$navbar-default-bg: #fff; - -// Buttons -$btn-default-color: $text-color; - -// Inputs -$input-border: lighten($text-color, 40%); -$input-border-focus: lighten($brand-primary, 25%); -$input-color-placeholder: lighten($text-color, 30%); - -// Panels -$panel-default-heading-bg: #fff; diff --git a/webpack.mix.js b/webpack.mix.js index 69594ff2d..f62e67488 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -1,4 +1,4 @@ -let mix = require('laravel-mix'); +const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- @@ -6,11 +6,10 @@ let mix = require('laravel-mix'); |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps - | for your Laravel application. By default, we are compiling the Sass + | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ -mix - .js('resources/assets/js/app.js', 'public/js') - .sass('resources/assets/sass/app.scss', 'public/css'); +mix.js('resources/assets/js/app.js', 'public/js') + .vue();