“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

Ali AntV G6 is very powerful and easy to use, but to compatible with IE will encounter various pits. Although the official website provides a solution, there is still a problem even if it is operated completely according to the official plan for various reasons. If this article can help students to step on pit less, then I do not waste two hours to sum up. This document takes the Vue CLI project as an example.

vue-g6-editor

I used the official recommended visual editor based on G6 and Vue to make a scene editor. The test is not compatible with IE, and the following error is reported:

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Vue CLI3 and above use core-JS to solve most of the IE compatibility problems, but many third-party libraries (node_modules) do not completely convert ES6 statements to ES5, potentially introducing new IE compatibility problems. In general webpack CLI projects, babel-loader ignores all files in node_modules by default in order to compile quickly. If you want to explicitly translate a dependency through Babel, list it in the transpileDependencies option and then convert it in the use project. If you understand this, it will be easier to solve the problem.

transpileDependencies: ["@antv/g"."@antv/g6"]
Copy the code

Note: all @ANTv /g runs below 3.2.10 for this example must have the “@ANTv /g” dependency set. Versions 3.2.10 to 3.8.5 do not need additional dependencies, but some dependency package paths in the sample recommendation code need to be modified accordingly to work

X-Flowchart-Vue

The example of the project is somewhat Viso, the flow chart is Nice, the documentation is Nice, but the package is too big. Tested that this example is not compatible with IE.

Because the project does not set transpileDependencies at all, you can set them as follows:

transpileDependencies: ["@oxoyo/xfc"]
Copy the code

Note: The example project dependencies, @oxoyo/ XFC, depend on ** @antV /g6**, and usually add direct dependencies to transpileDependencies.

Common engineering

Ordinary Vue CLI + @ANTV/G6 project compatible with IE problem? By my test, @antV/G6 4.0.4 and above is not compatible with IE, will report the following error:

Oh, my God, the new version uses Proxy. Step by step, trying to find the @ antv/layout/es/layout/layout. Js

// FIXME
// FOR G6
export const Layouts = new Proxy({}, {
    get: (target, propKey) = > {
        return getLayoutByName(propKey);
    },
    set: (target, propKey, value) = > {
        registerLayout(propKey, value);
        return true; }});Copy the code

Ali’s front end classmates aren’t easy either, are they? 😀. No way, since the use of Proxy, is equivalent to giving up IE. So if you must support IE, @ANTv/G6 version is better 3.1.0~4.0.4. Not recommended because version 3.1.0 or later has too many changes.

conclusion

Combined with the work practice, summarize the solution to compatible IE:

  1. Babel-plugin-transform-runtime /babel-polyfill is not configured in cli project of earlier version.
  2. High version CLI project, check no core-js configuration;
  3. Configure transpileDependencies for @ANTV/G6 and vue-echarts and Vue-Baiu-map.
  4. Finally, consider whether to downgrade dependent third-party libraries. Older versions of @ANTV/G6 and Swiper are not compatible with IE.

Some of you might say, has Microsoft abandoned IE for Edge? Why put so much effort into IE compatibility? To be honest, I’m looking forward to the end of IE as soon as possible. But in fact, the customer said must support IE, the boss product said must support IE, what method?