记一次vue脚手架打包生成的js里面变量逻辑错误的解决

问题背景

开发环境调用threejs,实现3d功能组件，开发环境测试正常，打包部署到现场后异常。浏览器控制台，报变量 i和 r，没有定义下图是点击报错地方打开的控制台截图。可以看到有 i r 变量。

1. 解决思路
   开发调试没有问题，那肯定是打包之后命名的变量存在不正确的逻辑了。肯定不能修改dist里面打包之后的代码，这样后面每次都要改，那么就要弄明白为什么变量i r 会报错，怎么出现的。拿这次的报错举例，是Object3D里面的raycast 方法，编译压缩后错误，我们需要取找源码，对比研究。
2. 问题解决
   我们在node_modules下找到threejs源码，对threejs源码中的方法进行阅读研究，发现npm打包时候调用的是build下面的three.module.js。找到raycast 对命令错误的变量进行增加命名处理 就是 let 新增变量 = 编译报错的变量。问题解决。
   
   这是因为打包命名变量 变量从 a - z 进行命令，难免出现重复，新增变量之后在一个scope内就可以重新进行a-z变量循环命名，可以解决这个问题。
   修改后，重新打包，部署运行正常。
3. 后记
   这种问题的解决需要不慌不乱，分析问题根源，选择正确的处理方式。
4. 一年后后记
   当时没有经验，其实这个是脚手架打包的问题，配置脚手架打包压缩的方式可以解决的更好，下面贴出vue.config.js里面添加的配置终极解决方案

		if (isProd) {
			//去除代码中的console和debugger,删除注释
			customConfig.optimization['minimizer'] = [
				// new terserPlugin({
				// 	parallel: true,
				// 	//exclude: /.*hmi-tags-config.*/,
				// 	terserOptions: {
				// 		compress: {
				// 			drop_console: false,
				// 			drop_debugger: true
				// 		},
				// 		format: {
				// 			comments: /.*config\.js$/, ///env.config.js/,
				// 		},
				// 	},
				// 	extractComments: false
				// })
				new terserPlugin({
				parallel: true,
				terserOptions: {
					compress: {
					drop_console: false,
					drop_debugger: true,
					// ★★★ 关键：保护模块系统 ★★★
					reduce_vars: false,
					unused: false,
					keep_fnames: true,
					keep_classnames: true,
					inline: 1,
					join_vars: false,
					collapse_vars: false,
					// 额外的保护
					side_effects: false,
					negate_iife: false,
					dead_code: false,
					if_return: false,
					booleans: false,
					loops: false,
					hoist_funs: false,
					hoist_vars: false,
					},
					// mangle: {
					// // ★★★ 保护所有关键标识符 ★★★
					// reserved: [
					// 	// 1. Webpack 运行时（必须保护）
					// 	'd', 'c', 'o', 'n', 'e', 'i', 'r', 't', 's',
					// 	'__webpack_require__', '__webpack_modules__', '__webpack_exports__',
					// 	'module', 'exports', 'require', 'define',
						
					// 	// 2. Three.js 内部变量
					// 	'Xo', 'Wo', '$o', 'ft', 'ht', 'dt', 'pt',
					// 	'Mo', 'Co', 'No', 'Fo', 'Uo', 'Lo', 'Do', 'jo',
						
					// 	// 3. 所有单字母（防止被压缩）
					// 	'a','b','c','d','e','f','g','h','i','j','k','l','m',
					// 	'n','o','p','q','r','s','t','u','v','w','x','y','z',
						
					// 	// 4. 所有大写单字母
					// 	'A','B','C','D','E','F','G','H','I','J','K','L','M',
					// 	'N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
						
					// 	// 5. 常见双字母组合
					// 	...['xo','yo','zo','wo','to','eo','ro','oo','so','ao','lo',
					// 		'co','uo','ho','do','po','mo','bo','vo','ko','jo'],
						
					// 	// 6. 你的业务变量
					// 	'THREE', 'Vue', 'jQuery', '$',
						
					// 	// 7. 正则模式
					// 	/^\$[a-z]o$/,     // $o 模式
					// 	/^[A-Z][a-z]o$/,  // Xo 模式
					// 	/^[a-z]{2}$/,     // 所有双字母
					// 	/^__/,            // __开头的
					// 	/^_[a-z]/,        // _开头的
					// ],
					// properties: {
					// 	// 保护属性名
					// 	regex: /^[a-z_$]/,
					// 	reserved: [
					// 	/^[a-z]$/,    // 单字母
					// 	/^[a-z]{2}$/, // 双字母
					// 	/^__/,        // __开头
					// 	/^_/,         // _开头
					// 	/\$/,         // 包含$
					// 	]
					// }
					// },
					format: {
					comments: /.*config\.js$/,
					// 保持输出格式
					beautify: false,
					braces: true,
					}
				},
				extractComments: false
				})
			];
		}```