Vue2.0 ES6 syntax downgrading ES5 operations

Since some lower versions of mobile phones do not support ES6 syntax, vue errors will occur. Combining various online methods, my project has finally successfully downgraded to ES5.

Install the plug-in first

npm install -D babel-preset-es2015 babel-core babel-preset-stage-2 babel-loader

Edit configuration files

Edit/build/

Edit entry node and become as follows

entry: {
  app: ['babel-polyfill', './src/']
}

Replace the array

{
    test: /\.js$/,
     loader: 'babel-loader',
     include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    }

for

{
    test: /\.js$/,
    exclude: /node_modules/, // Handle js files except for the node_modules    loader: 'babel-loader'
}

Then create a new .babelrc content in the root directory as

{
 "presets": [
  "es2015",
  "stage-2"
 ],
 "plugins": [

 ]
}

If URLSearchParams is used, you need to install npm install url-search-params-polyfill --save, and then import 'url-search-params-polyfill' in the class header that uses the object.

Finally npm run build compiles.

Verification is successful

Check whether there are const/let and other ES6 syntaxes in js compiled in the dist directory. If not, it will basically succeed.

Supplementary knowledge:Component es6 to es5 failed, resulting in an error from the lower version of the browser

Error is Uncaught SyntaxError: Unexpected token ...

I have read many solutions to this problem online but I haven't posted any implementation to convert this component into ES5

This tricky component is vue-superslide

Let's take a look at the contents of his entry file

// Import componentsimport superslide from './superslide'
// import superSlide from "./slide";
// import SuperSlideItem from "./slide-item";
 
// Store component listconst components = [superslide]
 
// Define the install method and receive Vue as a parameter.  If you use to register the plugin, all components will be registeredconst install = function(Vue) {
 // Determine whether to install if () return
 // traversal and register global components (component => (, component))
}
 
// Determine whether the file is directly introducedif (typeof window !== 'undefined' && ) {
 install()
}
 
export default {
 // The exported object must have install to be installed by the () method install,
 // The following is a specific component list ...components
}

There is really es6 syntax. Sadly, this component in the whole project is not escaped to ES5. I don't understand, so I still have to solve it. I didn't give up on it.

SolutionGo to the node_modules folder and find it, and use it as a static resource to directly place it in the assets directory

The original plug-in was introduced

import VueSuperSlide from 'vue-superslide'

(VueSuperSlide)

The current way to introduce it is

import VueSuperSlide from './assets/js/vue-superslide/packages/'

(VueSuperSlide)

This is simply LOW, but it solved the problem. I endured it.

The above article on downgrading ES5 with Vue2.0 ES6 syntax is all the content I share with you. I hope you can give you a reference and I hope you can support me more.