This repository was archived by the owner on Oct 4, 2023. It is now read-only.
MASSIVELY OUTDATED dependencies #1026
Comments
|
assets fixed by vuejs/vue-loader#1612 (comment) -- .babelrc
{
"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
'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 `<template lang="pug">` in Vue components
{
resourceQuery: /^\?vue/,
use: ['@pointotech/pug-plain-loader']
},
// this applies to pug imports inside JavaScript
{
use: ['raw-loader', '@pointotech/pug-plain-loader']
}
]
},
{
test: /\.html$/,
use: 'vue-html-loader'
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.node$/,
use: 'node-loader'
},
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
options: {
extractCSS: process.env.NODE_ENV === 'production',
loaders: {
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
scss: 'vue-style-loader!css-loader!sass-loader',
less: 'vue-style-loader!css-loader!less-loader'
}
}
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: 'imgs/[name]--[folder].[ext]',
esModule: false
}
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name]--[folder].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name]--[folder].[ext]'
}
}
}
]
},
node: {
__dirname: process.env.NODE_ENV !== 'production',
__filename: process.env.NODE_ENV !== 'production'
},
plugins: [
new webpack.DefinePlugin({
PKG_INFO: {
appId: JSON.stringify(pkg.build.appId),
productName: JSON.stringify(pkg.build.productName),
description: JSON.stringify(pkg.description),
name: JSON.stringify(pkg.name),
author: JSON.stringify(pkg.author),
version: JSON.stringify(pkg.version),
repository: JSON.stringify(pkg.repository),
homepage: JSON.stringify(pkg.homepage),
license: JSON.stringify(pkg.license),
vueVersion: JSON.stringify(vueVersion),
}
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({ filename: 'styles.css' }),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: process.env.NODE_ENV !== 'production' ?
path.resolve(__dirname, '../node_modules') : false
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
output: {
filename: '[name].js',
libraryTarget: 'commonjs2',
path: path.join(__dirname, '../dist/electron')
},
resolve: {
alias: {
'@': path.join(__dirname, '../src/renderer'),
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.vue', '.json', '.css', '.node']
},
target: 'electron-renderer'
}
/**
* Adjust rendererConfig for development settings
*/
if (process.env.NODE_ENV !== 'production') {
rendererConfig.plugins.push(
new webpack.DefinePlugin({
'__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
})
)
}
/**
* Adjust rendererConfig for production settings
*/
if (process.env.NODE_ENV === 'production') {
rendererConfig.devtool = ''
rendererConfig.plugins.push(
new MinifyPlugin(),
new CopyWebpackPlugin({
patterns: [{
from: path.join(__dirname, '../static'),
to: path.join(__dirname, '../dist/electron/static'),
globOptions: { ignore: ['.*'] }
}]
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
)
}
module.exports = rendererConfig-- package.json
{
"name": "somename",
"version": "0.0.1",
"author": "Nabil Redmann <>",
"description": "undefined",
"license": null,
"main": "./dist/electron/main.js",
"scripts": {
"osx:fix": "xattr -cr ./build/mac/somename.app",
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": "# npm run lint:fix"
},
"build": {
"productName": "somename",
"appId": "com.domain.name",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"category": "public.app-category.productivity",
"hardenedRuntime": true,
"gatekeeperAssess": false,
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"axios": "^0.19.2",
"electron-root-path": "^1.0.16",
"pug": "^3.0.0",
"vue": "^2.6.11",
"vue-electron": "^1.0.6",
"vue-router": "^3.3.4",
"vuex": "^3.4.0",
"vuex-electron": "^1.0.3"
},
"devDependencies": {
"@babel/core": "^7.10.3",
"@babel/plugin-transform-runtime": "^7.10.3",
"@babel/preset-env": "^7.10.3",
"@babel/register": "^7.10.3",
"@pointotech/pug-plain-loader": "^1.0.1",
"ajv": "^6.12.2",
"babel-loader": "^8.1.0",
"babel-minify-webpack-plugin": "^0.3.1",
"cfonts": "^2.8.5",
"chalk": "^4.1.0",
"copy-webpack-plugin": "^6.0.2",
"cross-env": "^7.0.2",
"css-loader": "^3.6.0",
"del": "^5.1.0",
"devtron": "^1.4.0",
"electron": "^9.0.4",
"electron-builder": "^22.7.0",
"electron-debug": "^3.1.0",
"electron-devtools-installer": "^3.0.0",
"electron-rebuild": "^1.11.0",
"eslint": "^7.3.0",
"eslint-config-standard": "^14.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.0.2",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"less": "^3.11.3",
"less-loader": "^6.1.1",
"mini-css-extract-plugin": "0.9.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.9.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
}
}-- ... I might have missed to add some files here. |
|
Your webpack.renderer.config.js has some erronious /* commenting, can you correct please? |
|
I added some backticks - i hope it will be more readable that way. It works for me as is. Feel free to optimize. |
|
attention |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
ncuto 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.
The text was updated successfully, but these errors were encountered: