如何解决打包后代码还有const的问题

低版本的android、IOS手机（andrond 6.0、ios9）是不能识别es6语法的，如果代码打包后还有es6语法，则手机就会报错，h5页面会加载不出来(白屏)。

正常情况下，代码打包后是不会再有es6语法。但是偶尔会遇到手残党，或者第三方组件的坑。所以这里记录下遇到打包后代码还有const需要怎么解决。

解决步骤：

1. 首先需要确定是哪段代码打包后出现const。

通过移动端调试 chrome://inspect/#devices 将出错的代码下载下来（或者直接在控制台查看代码也可以），然后再找出哪里出现const，根据一些特殊的方法名称（例如swiper组件中的touchMove,touchEnd等）或者考虑下自己新引入了哪些组件来确定出是哪里的代码打包有问题。

2.判断出哪段代码打包后出现const之后，就去查找该段代码，看是哪里写的不对，导致打包出现问题。

a.代码写错

b.第三方组件的坑(node_modules文件夹下的不参与编译)。

例如：

通过npm引入的swiper代码中有const, 而node_modules文件夹下的代码不参与编译，导致生成的chunk文件有const代码，从而让低版本手机不兼容。

 

解决方案：引入swiper方式修改。

错误写法：

import Swiper from 'swiper'; 

 

正确写法：

import Swiper from 'swiper/dist/js/swiper.js';

import "swiper/dist/css/swiper.min.css";

 

3.查看代码后如果都是正常的话，可以试试在本地打包，如果本地打包后的代码没有const, 打包工具打包的代码有const，则先判断下自己的yarn.lock、package-lock.json 这些文件是否正确，如果都正确的话则考虑是否是打包工具有问题。