Question:

Android 4.4 webviewH5 page access blank?

The reason:

The webView browser kernel version is too low for the JavaScript parser to parse the new ES5, ES6 syntax

Solution steps:

“

Incompatible grammars are handled with Babel Polyfill

IO /docs/en/ babeljs. IO /docs/en/bab…

  1. Depend on the installation

According to the official documentation, @babel/ Polyfill is obsolete in version 7.4 and is actually split into Core-JS and Regenerator-Runtime

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions)

Add configuration to package.json file

"The core - js", "^ 3.2.1", "@ Babel/preset - env" : "^ 7.5.5", "regenerator" : "^ 0.14.2", "regenerator - runtime" : "^ 0.13.3",Copy the code
  1. Entrance to the reference

Entry file main.js

// Babel 7 is compatible with older VERSIONS of IE but does not support JAVASCRIPT advanced feature APIS. Babel /polyfill import 'core-js/stable' import 'regenerator-Runtime /runtime'Copy the code
  1. Babel configuration

.babelrc or babel.config.js, for example

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            { modules: false, useBuiltIns: 'usage', corejs: 3 }
        ]
    ]
}
Copy the code

Note that corejs should be set to 3 because the default version of Corejs is 2 and stable is not found in corejs 2. If the version is not specified, an error will be reported

For details about the parameters, see the following documents

Babeljs. IO/docs/en/bab…

The deadlock

After setting Babel polyfill, it is accessible in IE11, but a syntax error is reported in IE10.

Curve 1:

When clicking the wrong direction, I found that it pointed to Use Strict. At that time, I mistook it as the problem of Use Strict, and tried to get rid of Use Strict, which led to a lot of detours. But in fact, I shouldn’t have made such a stupid mistake, and I didn’t think much at that time. Use strict has been around for a long time, and incompatibilities are impossible in IE10. If we look at the code above, we can see that there are a lot of Use Strict errors in the code above, but this one does not report an error, so it should not be use Strict.

Detour 2: I wonder whether some grammars are still not supported according to the configuration on the official website. Meanwhile, someone asked this question in Babel issue, so I have been going around in the configuration. Always suspected of missing some configuration. Wasted a lot of time

broken

Never forget, there will be echoes. At some point, it occurred to me that there was something wrong with a plug-in, and that there was something wrong with the code in the plug-in. The plugin vue-loadmore-simple is the one that keeps reporting errors. Tried to modify the source code of the plug-in, the source code is as follows:

import LoadMoreComponent from './LoadMore.vue'
const LoadMore = {
	install:function(Vue,options){
		Vue.component('loadMore',LoadMoreComponent)
	}
}
export default LoadMore
Copy the code

After changing const to var and compiling again, it should be displayed normally under IE10

thinking

Why are there so many plugins out there, but this one doesn’t work?

  1. Webpack configuration

vue cli3:

vue cli2:

As you can see from the picture above, plug-ins in node_modules are handled without Babel by default. So the plug-in entry file must be a packaged file.

  1. Plug-in contrast

Let’s take a look at the comparison of the two plug-ins

vue-loadmore-simple

The entry file for the plug-in is index.js, with the following code

vue-lazyload

The plug-in entry file is vue-lazyload.js and the code is as follows

As you can see, vue-lazyLoad entry code is compiled, while vue-loadmore-simple entry code is not compiled, so IE10 is always reporting errors

JS final step

If you want vue-loadmore-simple to be processed by Babel, you need to configure it in vue.config.js as follows

module.exports = {
    transpileDependencies: ['vue-loadmore-simple']
}
Copy the code

Style issues

Problem: the prefix of amount is not displayed, that is, the mark of ￥cannot be displayed

Cause: Older browsers do not recognize the UTF-8 character ￥

Solution: Replace the sheep’s horn with an HTML entity number as follows

<sub lang="en">&#165; </sub>Copy the code
Problem: Borders don’t show

Reason: In order to facilitate coding, a plug-in to escape PX into REM is configured. The configuration in vue.config.js is as follows

CSS: {// Solve the problem of automatically adding browser vendor prefix etc and automatically converting project PX to REM unit loaderOptions: {postcss: {plugins: [ require('autoprefixer'), require('postcss-px2rem')({ remUnit: 75 }) ] } } }Copy the code

This Webpack compiler causes the border unit to be less than 1px, and browsers cannot render pixels less than 1px (different browsers have different representations).

The best solution is to configure the plugin to not convert REM from 1px-2px

Problem: product pictures are not displayed

Cause: 100VW was used to open the banner, vw was not compatible with earlier browsers, so the banner height was 0

Solution: js dynamically obtain the screen width, reset the banner height