qiankun框架和火狐兼容问题

Question

qiankun框架和火狐兼容问题
在一个vue2项目中打包之后，使用qiankun框架分为基座和其他子应用
其中一个子应用使用的luckysheet三方库
在谷歌浏览器中，通过基座访问子应用正常展示无报错
直接访问子应用也正常
在火狐浏览器中直接访问子应用也可以正常展示无报错
但是在火狐浏览器中访问基座中集成的子应用就报TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 错误
有人遇到过吗，如何解决？

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

这个问题是由于在严格模式下调用了函数或者方法时，不允许直接访问参数对象和上下文对象。如果在开发环境中打开了JavaScript的严格模式，那么在全局作用域中不能直接访问对象的属性。

以下是在火狐浏览器中解决此问题的方法：

1. 设置strict环境变量：你可以使用如下命令设置火狐浏览器的strict环境变量：

   export const ISFirefox = true;
   

   如果你需要在全局范围内切换到不同的浏览器环境，可以在需要切换的环境下增加该变量的值。

2. 使用es6模块：如果你的luckysheet.js依赖于ES6语法，你可以考虑将它转换为ES5模块。这样做可以避免在火狐浏览器中出现这种错误。

   // luckysheet.js
   import { Chart } from "luckysheet";
   
   export default {
     chart: new Chart({
       container: document.getElementById("container"),
       data: {
         labels: ["Red", "Blue", "Green"],
         datasets: [
           {
             label: "Stacked bar chart",
             backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)"],
             borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)"],
             borderWidth: 1,
           },
         ],
       },
     });
   }
   

   然后，在你的Vue2项目的入口文件（例如index.html）中引入这个模块，并在页面组件中使用它：

   <script src="https://cdn.jsdelivr.net/npm/luckycharts@0.12.7/dist/LuckyCharts.min.js"></script>
   <script>
     import Chart from './luckyChart.vue';
   
     export default {
       components: {
         Chart,
       },
     };
   </script>
   

3. 使用babel-plugin-transform-react-redux: 你可以使用babel-plugin-transform-react-redux来转译React组件中的Redux store。这可以避免在非严格模式下访问store的属性。

   npx babel-plugin-transform-react-redux --source-map --out-file dist/babel-plugin-transform-react-redux.js react-redux
   

以上方法可以帮助你在火狐浏览器中解决幸运表单的问题。如果还有其他问题，请随时向我提问。