Electron-vue 框架升级 Babel7 并支持electron-preload webapck 4 打包过程记录

前言

我这边一直用的electron-vue框架是基于electron 21版本的，electron 29版本追加了很多新功能，但是这些新功能对开发者不友好，对electron构建出来的软件，使用者更安全，所以，我暂时不想研究electron 29版本，可发挥的地方又收窄了，electron这种东西越用越喜欢，嵌入进来的网页，可以自己想怎么搞就怎么搞，比起浏览器开发，真是专门为开发者独家打造的。

背景

electron-vue 老代码是不支持 data?.这种新式 ES 语法不支持打包，如若支持的话，又发现新版的 babel 插件又依赖于 babel7，导致出现 babel 版本冲突，最后的解决方案，则是全面升级 babel 至 babel7，并且适配好 webpack4（目前 electron-vue 框架正在用的），现将整个升级过程记录，同时也完善下.babelrc 配置文件在代码中如何生效的。

注意事项

electron 打包preload.js时如果是webview或者renderer.src="chrome-extesion://xxxxx" 这样开头的，是不支持module.exports 开头的，这种开头是node.js环境下的commonjs模块化支持，chrome-extension://xxxx 这个环境应该更特殊，更像target:"web"环境，但却支持require("electron")，目前我还没完全掌握规律，所以基于chrome-extension://xxxx 环境，还是老老实实自己写代码。

PS: chrome-extension://xxxxx 是个什么鬼？这是谷歌插件提供的option.html页面的访问协议，不懂得可以去谷歌一下，后续会出谷歌插件开发高级课程。

升级过程

卸载已安装的 babel 版本

npm uninstall babel-core babel-preset-env babel-plugin-transform-runtime babel-register babel-minify-webpack-plugin babel-loader

安装 Babel7 和其他相关依赖

-- babel7 核心库
npm install --save-dev @babel/core@7 @babel/cli@7 @babel/preset-env@7 babel-loader@8
-- 安装可选链、?? 判断插件
npm install --save-dev @babel/plugin-proposal-optional-chaining@7 @babel/plugin-proposal-nullish-coalescing-operator@7

-- 安装 Babel 的 runtime 插件（如果您的代码使用了 async/await 或者 generator 函数等)
npm install --save-dev @babel/plugin-transform-runtime@7 @babel/runtime@7

适配 webpack 的 terser

npm install terser-webpack-plugin@4.2.3 --save-dev

安装一些其他 babel 插件

npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods @babel/plugin-transform-runtime --save-dev

babel 关键插件解释：

这些插件分别用于以下功能：

@babel/plugin-proposal-optional-chaining: 允许在代码中使用可选链操作符（?.）。
@babel/plugin-proposal-nullish-coalescing-operator: 允许在代码中使用空值合并操作符（??）。
@babel/plugin-proposal-class-properties: 允许使用类属性语法。
@babel/plugin-proposal-private-methods: 允许使用私有方法语法（例如：#privateMethod）。
@babel/plugin-transform-runtime: 用于将一些 ES6+ 的功能（如 Generator 函数）转化为兼容性更好的代码，同时避免重复的代码冗余。

.babelrc 配置怎么用

.babelrc 集中配置了几种 babel env 环境的配置，在具体的 webpack 打包配置时，可以通过设置环境变量来使用具体的配置

.babelrc preload 环境截图

为什么配置在 `plugins` 下统一？

plugins 是针对所有环境（main, renderer, preload, web）统一的。因为这些插件的功能通常是跨环境的（即无论是在浏览器端、Node.js 环境，还是 Electron 渲染进程中，使用这些插件的代码行为应该一致）。所以将它们放到 plugins 配置中统一管理，可以减少冗余的配置。

附带 preload 的 webpack 打包配置代码

完全精简版的 preload 配置代码

'use strict'

process.env.BABEL_ENV = 'preload'

const path = require('path')
const {dependencies} = require('../../package.json')
const webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin');

// 获取当前配置文件的名称 (不包含扩展名)
const configFileName = path.basename(__filename, '.js');

// 提取文件名中的第二个单词并将其转换为 kebab-case
const secondWord = configFileName.split('.')[1]; // 提取文件名中的第二个单词
const caseFileName = secondWord.split('-')[1]

/**
 * 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', 'element-ui']
console.log(path.join(__dirname, `../../src/renderer/preload/${caseFileName}/main.js`))
let preloadLineConfig = {
    // 添加以下一行，设置 mode
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    devtool: process.env.NODE_ENV === 'production' ? false : '#cheap-module-eval-source-map',
    entry: {
        renderer: path.join(__dirname, `../../src/renderer/preload/${caseFileName}/main.js`),
    },
    externals: [
        ...Object.keys(dependencies || {}).filter(
            (d) => !whiteListedModules.includes(d)
        ),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true
                        }
                    },
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.node$/,
                use: 'node-loader',
            },
        ],
    },
    node: {
        __dirname: process.env.NODE_ENV !== 'production',
        __filename: process.env.NODE_ENV !== 'production',
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    output: {
        filename: '[name].js',
        libraryTarget: 'commonjs2',
        path: path.join(__dirname, `../../dist/electron/preload`),
    },
    resolve: {
        extensions: ['.js', '.node'],
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true, // 开启多线程压缩
                cache: true,
                terserOptions: {
                    // 在这里添加 Terser 的配置选项
                    compress: {
                        drop_console: true, // 例如，移除 console.log
                    },
                },
            }),
        ],
    },
    target: 'electron-preload',
}

/**
 * Adjust preloadLineConfig for development settings
 */
if (process.env.NODE_ENV !== 'production') {
    preloadLineConfig.plugins.push(
        new webpack.DefinePlugin({
            __static: `"${path.join(__dirname, '../../static').replace(/\\/g, '\\\\')}"`,
        })
    )
}

/**
 * Adjust preloadLineConfig for production settings
 */

module.exports = preloadLineConfig