SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
https://simulatedgreg.gitbooks.io/electron-vue/content/
MIT License
15.47k stars 1.54k forks source link

MASSIVELY OUTDATED dependencies #1026

Open BananaAcid opened 4 years ago

BananaAcid commented 4 years ago

Babel and Electron are ancient.

As of writing, included is Electron 2, but there is Electron is v9+ and latest Babel uses @babel/* packages.

When all is updated to the latest, there is a lot of fixing required. I just did - took me a few hours getting it all together. I used ncu to push it all to the latest.

For everyone reading this: as an example, css backdrop-filter as well as a lot of other things are not usable with the ancient versions.

BananaAcid commented 4 years ago

assets fixed by https://github.com/vuejs/vue-loader/issues/1612#issuecomment-614542603 tapSync has to become: compilation.compiler.hooks.afterEmit.tapAsync

--

.babelrc

```json { "comments": false, "env": { "main": { "presets": [ ["@babel/preset-env", { "targets": { "node": 8 } }] //"stage-0" ] }, "renderer": { "presets": [ ["@babel/preset-env", { "modules": false }] //"stage-0" ] }, "web": { "presets": [ ["@babel/preset-env", { "modules": false }] //"stage-0" ] } }, "plugins": ["@babel/plugin-transform-runtime"] } ```

--

webpack.renderer.config.js (and the other webpack.*.config.js files need to be adjusted as well)

```js 'use strict' process.env.BABEL_ENV = 'renderer' const path = require('path') const { dependencies } = require('../package.json') const webpack = require('webpack') const MinifyPlugin = require("babel-minify-webpack-plugin") const CopyWebpackPlugin = require('copy-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader') const pkg = require('../package.json') const vueVersion = require('vue/package.json').version /** * List of node_modules to include in webpack bundle * * Required for specific packages like Vue UI libraries * that provide pure *.vue files that need compiling * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals */ let whiteListedModules = ['vue'] let rendererConfig = { devtool: '#cheap-module-eval-source-map', entry: { renderer: path.join(__dirname, '../src/renderer/main.js') }, externals: [ ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)) ], module: { rules: [ /* { test: /\.(js|vue)$/, enforce: 'pre', exclude: /node_modules/, use: { loader: 'eslint-loader', options: { formatter: require('eslint-friendly-formatter') } } },*/ { test: /\.scss$/, use: ['vue-style-loader', 'css-loader', 'sass-loader'] }, { test: /\.sass$/, use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] }, { test: /\.less$/, use: ['vue-style-loader', 'css-loader', 'less-loader'] }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }, { test: /\.pug$/, oneOf: [ // this applies to `