Open BananaAcid opened 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 `` 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
productName
), gatekeeper and dependencies, dmg.contents
needs some position fixing
{
"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
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.