术习电报 / electron-vue-template

转到一个项目
切换导航栏
切换导航栏固定状态
umbrella22
37036de6 1 个父辈 49ddced6

升级webpack5

内嵌 并排
正在显示 12 个修改的文件 包含 160 行增加 和 171 行删除
......@@ -6,6 +6,8 @@
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"node": 7
}
......@@ -46,7 +48,9 @@
[
"@babel/preset-env",
{
"modules": false
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
],
......@@ -84,7 +88,9 @@
[
"@babel/preset-env",
{
"modules": false
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
],
......
'use strict'
process.env.NODE_ENV = 'production'
const { say } = require('cfonts')
const chalk = require('chalk')
const del = require('del')
......@@ -21,16 +19,16 @@ if (process.env.BUILD_TARGET === 'clean') clean()
else if (process.env.BUILD_TARGET === 'web') web()
else build()
function clean () {
del.sync(['dist/electron/*','build/*', '!build/icons','!build/lib','!build/lib/electron-build.*', '!build/icons/icon.*'])
function clean() {
del.sync(['dist/electron/*', 'build/*', '!build/icons', '!build/lib', '!build/lib/electron-build.*', '!build/icons/icon.*'])
console.log(`\n${doneLog}clear done`)
process.exit()
}
function build () {
function build() {
greeting()
del.sync(['dist/electron/*', '!.gitkeep'])
del.sync(['dist/electron/*', 'build/*', '!build/icons', '!build/lib', '!build/lib/electron-build.*', '!build/icons/icon.*'])
const tasks = ['main', 'renderer']
const m = new Multispinner(tasks, {
......@@ -68,7 +66,7 @@ function build () {
})
}
function pack (config) {
function pack(config) {
return new Promise((resolve, reject) => {
config.mode = 'production'
webpack(config, (err, stats) => {
......@@ -96,7 +94,7 @@ function pack (config) {
})
}
function web () {
function web() {
del.sync(['dist/web/*', '!.gitkeep'])
rendererConfig.mode = 'production'
webpack(rendererConfig, (err, stats) => {
......@@ -111,7 +109,7 @@ function web () {
})
}
function greeting () {
function greeting() {
const cols = process.stdout.columns
let text = ''
......
......@@ -71,6 +71,7 @@ function startRenderer() {
if (err) {
reject("PortError:" + err)
} else {
WebpackDevServer.addDevServerEntrypoints(rendererConfig, {});
const compiler = webpack(rendererConfig)
hotMiddleware = webpackHotMiddleware(compiler, {
log: false,
......@@ -91,6 +92,10 @@ function startRenderer() {
compiler, {
contentBase: path.join(__dirname, '../'),
quiet: true,
stats: {
colors: true,
},
before(app, ctx) {
app.use(hotMiddleware)
ctx.middleware.waitUntilValid(() => {
......
'use strict'
const MiniCssPlugin = require('mini-css-extract-plugin');
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
esModule: false
}
}
// 这里就是生成loader和其对应的配置
function generateLoaders(loader, loaderOptions) {
const loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// 当配置信息中开启此项时，启用css分离压缩
// 这一项在生产环境时，是默认开启的
if (options.extract) {
return [MiniCssPlugin.loader].concat(loaders)
} else {
// 如果不开启则让vue-style-loader来处理
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// 根据上面的函数遍历出来的各个css预处理器的loader进行最后的拼装
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
......@@ -20,22 +20,6 @@ let mainConfig = {
],
module: {
rules: [
// {
// test: /\.(js)$/,
// enforce: 'pre',
// exclude: /node_modules/,
// use: {
// loader: 'eslint-loader',
// options: {
// formatter: require('eslint-friendly-formatter')
// }
// }
// },
// {
// test: /\.js$/,
// use: 'happypack/loader?id=MainHappyBabel',
// exclude: /node_modules/
// },
{
test: /\.ts$/,
use: [{
......
......@@ -6,13 +6,16 @@ const path = require('path')
const { dependencies } = require('../package.json')
const webpack = require('webpack')
const config = require('../config')
const { styleLoaders } = require('./utils')
const IsWeb = process.env.ENV_TARGET === 'web'
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
// const ESLintPlugin = require('eslint-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
......@@ -26,7 +29,7 @@ function resolve(dir) {
let whiteListedModules = IsWeb ? [] : ['vue', "element-ui"]
let rendererConfig = {
devtool: '#cheap-module-eval-source-map',
devtool: 'eval-source-map',
entry: {
renderer: resolve('src/renderer/main.js')
},
......@@ -35,57 +38,9 @@ let rendererConfig = {
],
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',
{
loader: 'css-loader',
options: {
esModule: false
}
},
'sass-loader']
},
{
test: /\.sass$/,
use: ['vue-style-loader',
{
loader: 'css-loader',
options: {
esModule: false
}
}, 'sass-loader?indentedSyntax']
},
{
test: /\.less$/,
use: ['vue-style-loader',
{
loader: 'css-loader',
options: {
esModule: false
}
}, 'less-loader']
},
{
test: /\.css$/,
use: ['vue-style-loader',
{
loader: 'css-loader',
options: {
esModule: false
}
}]
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.html$/,
......@@ -102,20 +57,6 @@ let rendererConfig = {
exclude: /node_modules/
},
{
test: /\.node$/,
use: 'node-loader'
},
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
options: {
cacheDirectory: 'node_modules/.cache/vue-loader',
cacheIdentifier: '7270960a',
}
}
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/renderer/icons')],
......@@ -124,35 +65,24 @@ let rendererConfig = {
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
exclude: [resolve('src/renderer/icons')],
use: {
loader: 'url-loader',
query: {
esModule: false,
limit: 10000,
name: 'imgs/[name]--[folder].[ext]'
test: /\.(png|jpe?g|gif)(\?.*)?$/,
type: "asset/resource",
generator: {
filename: 'imgs/[name]--[hash].[ext]'
}
},
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
esModule: false,
limit: 10000,
name: 'media/[name]--[folder].[ext]'
type: "asset/resource",
generator: {
filename: 'media/[name]--[hash].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
esModule: false,
limit: 10000,
name: 'fonts/[name]--[folder].[ext]'
}
type: "asset/resource",
generator: {
filename: 'fonts/[name]--[hash].[ext]'
}
}
]
......@@ -209,6 +139,8 @@ let rendererConfig = {
},
target: 'electron-renderer'
}
// 将css相关得loader抽取出来
rendererConfig.module.rules = rendererConfig.module.rules.concat(styleLoaders({ sourceMap: config.dev.cssSourceMap }))
/**
* Adjust rendererConfig for development settings
......@@ -226,8 +158,6 @@ if (process.env.NODE_ENV !== 'production' && !IsWeb) {
* Adjust rendererConfig for production settings
*/
if (process.env.NODE_ENV === 'production') {
rendererConfig.devtool = ''
rendererConfig.plugins.push(
new CopyWebpackPlugin({
patterns: [
......@@ -252,8 +182,6 @@ if (process.env.NODE_ENV === 'production') {
new TerserPlugin({
test: /\.js(\?.*)?$/i,
extractComments: false,
cache: true,
sourceMap: false,
terserOptions: {
warnings: false,
compress: {
......@@ -270,7 +198,7 @@ if (process.env.NODE_ENV === 'production') {
drop_debugger: true,
pure_funcs: ['console.log']
},
}
},
})]
}
if (IsWeb) {
......@@ -298,6 +226,9 @@ if (process.env.NODE_ENV === 'production') {
}
rendererConfig.optimization.runtimeChunk = { name: 'runtime' }
}
} else {
// eslint
// rendererConfig.plugins.push(new ESLintPlugin(config.dev.ESLintoptions))
}
module.exports = rendererConfig
......
......@@ -14,5 +14,5 @@ yarn-error.log*
*.ntvs*
*.njsproj
*.sln
electron-vue-template-ts.7z
server/client/electron-vue-admin Setup 0.0.1.exe
/build/builder-effective-config.yaml
......
......@@ -7,7 +7,11 @@ module.exports = {
env: require('./dev.env'),
removeElectronJunk: true,
chineseLog: false,
port: 9080
port: 9080,
ESLintoptions:{
formatter: require('eslint-friendly-formatter')
},
cssSourceMap: true
},
UseStartupChart: true,
IsUseSysTitle: true,
......
......@@ -6,7 +6,7 @@
"license": "MIT",
"main": "./dist/electron/main.js",
"scripts": {
"dev": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && node .electron-vue/dev-runner.js",
"dev": "node .electron-vue/dev-runner.js",
"build": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && node .electron-vue/build.js && electron-builder",
"build:win32": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && node .electron-vue/build.js && electron-builder --win --ia32",
"build:win64": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && node .electron-vue/build.js && electron-builder --win --x64",
......@@ -19,7 +19,7 @@
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"update:serve": "node server/index.js",
"dep:upgrade": "yarn upgrade-interactive --latest",
"postinstall": "install-app-deps"
"postinstall": "electron-builder install-app-deps"
},
"build": {
"extraFiles": [],
......@@ -66,7 +66,7 @@
},
"dependencies": {
"axios": "^0.21.1",
"date-fns": "^2.16.1",
"date-fns": "^2.17.0",
"electron-updater": "^4.3.5",
"element-ui": "^2.15.0",
"express": "^4.17.1",
......@@ -74,79 +74,75 @@
"js-cookie": "^2.2.1",
"nprogress": "^0.2.0",
"vue": "^2.6.12",
"vue-router": "^3.4.9",
"vuex": "^3.6.0"
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.12.12",
"@babel/plugin-proposal-do-expressions": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-proposal-export-namespace-from": "^7.12.1",
"@babel/plugin-proposal-function-bind": "^7.12.1",
"@babel/plugin-proposal-function-sent": "^7.12.1",
"@babel/plugin-proposal-json-strings": "^7.12.1",
"@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-numeric-separator": "^7.12.7",
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
"@babel/plugin-proposal-pipeline-operator": "^7.12.1",
"@babel/plugin-proposal-throw-expressions": "^7.12.1",
"@babel/core": "^7.12.13",
"@babel/eslint-parser": "^7.12.13",
"@babel/plugin-proposal-class-properties": "^7.12.13",
"@babel/plugin-proposal-decorators": "^7.12.13",
"@babel/plugin-proposal-do-expressions": "^7.12.13",
"@babel/plugin-proposal-export-default-from": "^7.12.13",
"@babel/plugin-proposal-export-namespace-from": "^7.12.13",
"@babel/plugin-proposal-function-bind": "^7.12.13",
"@babel/plugin-proposal-function-sent": "^7.12.13",
"@babel/plugin-proposal-json-strings": "^7.12.13",
"@babel/plugin-proposal-logical-assignment-operators": "^7.12.13",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
"@babel/plugin-proposal-numeric-separator": "^7.12.13",
"@babel/plugin-proposal-optional-chaining": "^7.12.13",
"@babel/plugin-proposal-pipeline-operator": "^7.12.13",
"@babel/plugin-proposal-throw-expressions": "^7.12.13",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/plugin-transform-runtime": "^7.12.15",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"@babel/register": "^7.12.10",
"@babel/runtime": "^7.12.5",
"@babel/preset-env": "^7.12.13",
"@babel/register": "^7.12.13",
"@babel/runtime": "^7.12.13",
"@types/fs-extra": "^9.0.6",
"@types/node": "^14.14.22",
"ajv": "^6.12.6",
"babel-eslint": "^9.0.0",
"@types/node": "^14.14.25",
"ajv": "^7.0.4",
"babel-loader": "^8.2.2",
"cache-loader": "^4.1.0",
"cfonts": "^2.9.1",
"chalk": "^4.0.0",
"copy-webpack-plugin": "^6.3.2",
"copy-webpack-plugin": "^7.0.0",
"core-js": "^3.8.3",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"del": "^6.0.0",
"electron": "^11.2.1",
"electron": "^11.2.3",
"electron-builder": "^22.9.1",
"electron-devtools-installer": "^3.1.1",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint": "^7.19.0",
"eslint-config-standard": "^16.0.2",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.4",
"eslint-plugin-html": "^6.1.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^9.2.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "1.3.4",
"eslint-webpack-plugin": "^2.5.0",
"html-webpack-plugin": "^5.0.0",
"mini-css-extract-plugin": "1.3.5",
"multispinner": "^0.2.1",
"node-loader": "^1.0.2",
"portfinder": "^1.0.28",
"sass": "^1.32.5",
"sass-loader": "^10.1.1",
"sass": "^1.32.6",
"sass-loader": "^11.0.0",
"split2": "^3.2.2",
"style-loader": "^2.0.0",
"svg-sprite-loader": "^5.2.1",
"terser-webpack-plugin": "^4.2.3",
"terser-webpack-plugin": "^5.1.1",
"thread-loader": "^3.0.1",
"through2-filter": "^3.0.0",
"ts-loader": "^8.0.14",
"ts-loader": "^8.0.15",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack": "^5.21.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^5.7.3"
......
// 这里是定义菜单的地方，详情请查看 https://electronjs.org/docs/api/menu
import { dialog } from 'electron'
import { type, arch, release } from 'os'
import { version } from '../../../package.json'
import packageInfo from '../../../package.json'
const menu = [
{
......@@ -24,12 +24,12 @@ const menu = [
}
}]
}]
function info () {
function info() {
dialog.showMessageBox({
title: '关于',
type: 'info',
message: 'electron-Vue框架',
detail: `版本信息：${version}\n引擎版本：${process.versions.v8}\n当前系统：${type()} ${arch()} ${release()}`,
detail: `版本信息：${packageInfo.version}\n引擎版本：${process.versions.v8}\n当前系统：${type()} ${arch()} ${release()}`,
noLink: true,
buttons: ['查看github', '确定']
})
......
......@@ -2,7 +2,7 @@ import { app, ipcMain, BrowserWindow, dialog } from 'electron'
import { join } from 'path'
import { arch, platform } from 'os'
import { stat, remove } from 'fs-extra'
import { version } from '../../../package.json'
import packageInfo from '../../../package.json'
/**
......@@ -19,7 +19,7 @@ class Main {
public mainWindow: BrowserWindow = null
public downloadUrl: string = ""
public version: string = version
public version: string = packageInfo.version
public baseUrl: string = ''
public Sysarch: string = arch().includes('64') ? 'win64' : 'win32'
public HistoryFilePath = join(app.getPath('downloads'), platform().includes('win32') ? `electron_${this.version}_${this.Sysarch}.exe` : `electron_${this.version}_mac.dmg`)
......
此文件的差异太大，无法显示。