网站开发api平台,扬州工程建设信息网官网,网站开发学哪种语言,百度关键词收费标准前言
我这边一直用的electron-vue框架是基于electron 21版本的#xff0c;electron 29版本追加了很多新功能#xff0c;但是这些新功能对开发者不友好#xff0c;对electron构建出来的软件#xff0c;使用者更安全#xff0c;所以#xff0c;我暂时不想研究electron 29版…前言
我这边一直用的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.srcchrome-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/core7 babel/cli7 babel/preset-env7 babel-loader8
-- 安装可选链、?? 判断插件
npm install --save-dev babel/plugin-proposal-optional-chaining7 babel/plugin-proposal-nullish-coalescing-operator7-- 安装 Babel 的 runtime 插件如果您的代码使用了 async/await 或者 generator 函数等)
npm install --save-dev babel/plugin-transform-runtime7 babel/runtime7适配 webpack 的 terser
npm install terser-webpack-plugin4.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 strictprocess.env.BABEL_ENV preloadconst 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延伸技术
使用 webstorm 的开发者只要将 node_modules 目录标记为源码或者从排除中剔除webstorm 就会自动扫描 node_modules 下的所有源代码并且提供最好的提示效果 原来没有提示性的代码有了提示性windows 快捷键 Ctrl鼠标左键可以点击这个 Plugin 看源码 可以看到很多 webpack 插件这些插件用 AI 来解释下 webpack 插件说明
这些东西虽然不需要记忆但是的确在以后的打包过程中动态地处理一些东西时非常有用包括引用路径引用的资源甚至定义的不同变量都是能用到的 AutomaticPrefetchPlugin: 自动预加载资源提升加载性能。 BannerPlugin: 为打包的文件添加横幅注释。 CachePlugin: 控制构建缓存优化构建速度。 ContextExclusionPlugin: 排除不需要的上下文模块减少打包体积。 ContextReplacementPlugin: 替换模块上下文优化构建和运行时行为。 DefinePlugin: 定义全局常量替换代码中的指定值。 Dependency: 处理模块依赖关系。 DllPlugin: 提前构建并生成 DLL动态链接库文件提升构建速度。 DllReferencePlugin: 引用其他 DLL 文件优化构建性能。 EnvironmentPlugin: 设置环境变量常用于配置和优化。 EvalDevToolModulePlugin: 提供源映射用于开发模式下调试。 EvalSourceMapDevToolPlugin: 提供 eval-based 源映射优化开发调试。 ExtendedAPIPlugin: 扩展 Webpack 的 API 功能。 ExternalsPlugin: 将外部库如 CDN排除在打包之外减少打包文件大小。 HashedModuleIdsPlugin: 使用模块的哈希值来生成唯一 ID提升长期缓存效果。 HotModuleReplacementPlugin: 支持热模块替换实时更新应用而无需重新加载页面。 IgnorePlugin: 忽略不需要的模块或文件优化打包。 LibraryTemplatePlugin: 用于库的打包生成适合库的模板。 LoaderOptionsPlugin: 为加载器提供选项配置。 LoaderTargetPlugin: 设置加载器的目标环境指定如何处理模块。 MemoryOutputFileSystem: 使用内存文件系统在内存中存储构建文件提升速度。 Module: 处理和加载模块的基本单元。 ModuleFilenameHelpers: 帮助工具类生成模块的文件名。 NamedChunksPlugin: 使用模块名称生成输出的 chunk 名称。 NamedModulesPlugin: 为模块分配更易于理解的名称方便调试。 NoEmitOnErrorsPlugin: 构建失败时不生成输出文件避免错误文件的生成。 NormalModuleReplacementPlugin: 替换模块的正常流程允许条件性加载不同模块。 PrefetchPlugin: 提前加载指定的模块提升页面加载性能。 ProgressPlugin: 打包过程中显示进度信息。 ProvidePlugin: 自动加载某些模块或变量避免在每个文件中显式引入。 SetVarMainTemplatePlugin: 设置入口模板通常用于自定义构建模板。 SingleEntryPlugin: 为单一入口提供插件支持。 SourceMapDevToolPlugin: 生成源映射文件帮助开发调试。 Stats: 输出 Webpack 构建过程的统计信息。 Template: 模板引擎用于构建输出内容。 UmdMainTemplatePlugin: 生成 UMD通用模块定义格式的模板支持多平台。 WatchIgnorePlugin: 在开发过程中忽略某些文件或目录避免不必要的重新构建。 补充
目前探索electron-vue这个环境直接升级webpack 5打包没有成功后续我将借助AI来从新构建基于node.js 18版本下的webpack5的各种依赖
另外关于electron-vue框架的详细精讲也会录个视频发到B站去
