广州网站建设 全包seopeixun
背景
在调研 chatknow 时，发现对方的源代码的后缀名为 .jsc，之前 helloworld 采用 Uglify / Obfuscator 是比较容易破解的，毕竟源代码可以反编译过来，代码信息并没有损失性编码，而二进制打包的方式是损失性编码，即原来的代码结构在二进制层面都是破坏的，甚至包括变量名也会进行破坏式修改，转为二进制直接运行，这种代码反编译难度极大，基本上是没办法抄袭的。
同理，我们的代码也是辛辛苦苦开发出来的，若被对方直接抄袭源码，将对我们的造成很大的损失，为此，我们也需要加固自己的代码。
二进制原理
-
JavaScript代码通过V8的解析器生成抽象语法树（AST）。
-
Ignition解释器将AST转换为字节码，存储在内存中或缓存文件中（例如.jsc文件）
-
bytenode利用V8的vm.Script接口，通过produceCachedData生成字节码缓冲区（buffer）。
const bytenode = require('bytenode');
let bytecode = bytenode.compileCode('console.log("Hello World!");');打包关键
-
本地所使用的 node.js 版本一定要和 electron 内置的 node.js 本质一致，否则打包出来的 jsc 无法在 electron 版本中运行，我们的 wadesk 用的 electron 内置版本是 16.20.2
webpack 5 打包方式
-
写一个插件，在代码打包完成输出到指定路径下时，派生状态时，做 bytecode 处理
-
派生状态时代码刚刚构建在一个文件里，还没有进行混淆和压缩，回填的资源还会经过TerserPlugin 插件进一步压缩
-
const Module = require('module');
const bytenode = require('bytenode');
const fs = require('fs').promises;
const path = require('path');// 从 Webpack 获取 Compilation 类，用于访问 stage 常量
const { Compilation } = require('webpack');class BytenodeWebpackPlugin {// constructor 部分保持不变constructor(options = {}) {const { bytecodeTemplate, ...otherOptions } = options;if (!bytecodeTemplate) {throw new Error("BytenodeWebpackPlugin: 'bytecodeTemplate' 选项是必需的，请提供 bytecode loader 模板文件的路径。");}this.options = {compileAsModule: true,keepSource: false,...otherOptions,bytecodeTemplate: path.resolve(process.cwd(), bytecodeTemplate),};}apply(compiler) {// --- 核心改动：从 emit 迁移到 processAssets ---// 1. 使用 thisCompilation 钩子来获取每次编译的 compilation 对象compiler.hooks.thisCompilation.tap('BytenodeWebpackPlugin', (compilation) => {// 2. 在 compilation 对象上，使用新的 processAssets 钩子compilation.hooks.processAssets.tapPromise({name: 'BytenodeWebpackPlugin',// 3. 指定一个合适的阶段// PROCESS_ASSETS_STAGE_DERIVED 用于从现有资源派生出新资源，非常适合此场景stage: Compilation.PROCESS_ASSETS_STAGE_DERIVED,},// 4. 这个钩子会直接提供 assets 对象，我们在这个函数内完成所有资源的修改async (assets) => {// ----> 以下是原有的核心逻辑，原封不动地迁移至此 <----let entryJsName = null;const entrypoints = compilation.entrypoints;if (entrypoints.size === 0) {return;}const entryPoint = entrypoints.get(entrypoints.keys().next().value);entryJsName = entryPoint.getFiles().find(file => file.endsWith('.js'));if (!entryJsName) {return;}if (!assets[entryJsName]) {return;}let source = assets[entryJsName].source();if (this.options.compileAsModule) {source = Module.wrap(source);}const bytecode = await bytenode.compileElectronCode(source);const entryJscName = entryJsName.replace(/\.js$/, '.jsc');// 直接在传入的 assets 对象上进行操作assets[entryJscName] = {source: () => bytecode,size: () => bytecode.length,};try {const bytecodeLoaderContent = await fs.readFile(this.options.bytecodeTemplate);assets['bytecode-loader.js'] = {source: () => bytecodeLoaderContent,size: () => bytecodeLoaderContent.length,};} catch (error) {compilation.errors.push(new Error(`BytenodeWebpackPlugin: 无法从路径 ${this.options.bytecodeTemplate} 读取 bytecode 模板文件。错误: ${error.message}`));return;}const newEntryJsContent = `'use strict';require('./bytecode-loader.js');require('./${entryJscName}');`.trim();assets[entryJsName] = {source: () => Buffer.from(newEntryJsContent),size: () => Buffer.from(newEntryJsContent).length,};});});}
}module.exports = BytenodeWebpackPlugin;-
在配置文件中引入该插件即可，传入运行 jsc 的解码模板即可，这里其实就是一个拷贝动作，后续需要文件输出时，移动调整替换文件的操作均可在这个插件中实现
踩坑过程
-
electron-bytenode-example 基于 @herberttn/bytenode-webpack-plugin 来运行
-
@herberttn/bytenode-webpack-plugin 这个又依赖于 @vercel/webpack-asset-relocator-loader
-
但 @vercel/webpack-asset-relocator-loader 装上之后，build 时就会卡死
-
又发现 csdn 有一篇 Electron-bytenode-webpack-plugin NPM | npm.io 安装后可以打包出来 jsc 文件了，且将 bytecode-loader.js 拷贝过来后，发现可以运行了，说明这里打包成功了
-
看完这个插件的源代码发现特别简单，只是基于 bytecode 库在文件导出时，让 bytecode 构建一遍即可
-
基于 5，我就让 AI 在这个插件的基础上开始改造，将 bytecode-loader.js 拷贝到指定目录下即可，同时创建入口文件 main.js，打包后正常运行。
-
electron源码保护_electron 加密-CSDN博客 评论区说现在有成熟框架来帮助你进行二进制打包，看回复是 源代码保护 | electron-vite
-
后续会迁移代码到 electron-vite 脚手架上来