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 = {// 添加以下一行，设置 modemode: 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