【报Bug】在uniapp项目中使用了es6新方法无法兼容的问题(已解决)

分类：uni-app

微信小程序微信兼容兼容性浏览器兼容 uniapp

使用vuecli创建的项目,在项目中使用了es6新方法

解决见github代码,点我跳转

如, ./src/pages/index/index.vue中使用了es6的Array.prototype.flatMap

一、尝试过在`./src/main.js`中写

import "core-js/fn/array/flat-map"

这种方式最终打包出来的代码有 flatMap相关兼容代码
上传到体验版 却没有flatMap方法
(见下图)
体验版本使用flatMap报错1

二、尝试过在`./babel.config.js`中的`@vue/app`配置中写polyfills

module.exports = {  
  presets: [  
    [  
      '@vue/app',  
      {  
        modules: 'commonjs',  
        useBuiltIns: 'entry',  
        polyfills: [  
          'es7.array.flat-map'  
        ]  
      }  
    ]  
  ],  
  plugins  
}

但是最终打包出来的代码没有 flatMap相关兼容代码
(见下图)
体验版本使用flatMap报错2

2019-08-05 16:43 负责人:无分享

2 个回复

DCloud_UNI_FXY

目前 corejs 的 polyfill 无法直接在小程序中使用，预计后续实现自动增加对应 polyfill。
暂时两个解决方案
1.自行增加可运行在小程序的 polyfill 代码

if (!Array.prototype.flatMap) {  
Array.prototype.flatMap = ...  
}

2.使用 lodash（最好单模块引用，而不是整体引入）

菜鸡 (作者)

还有个疑问,就是点击微信开发者工具的真机调试按钮,然后扫码,flatMap功能就是正常的,

(但是点击编译旁边的预览按钮就不正常)

应该是微信会有转码

你知道怎么上传真机调试的代码到微信小程序的平台上去吗?

2019-08-06 14:12
DCloud_UNI_FXY

回复菜鸡: 应该是真机调试时，js代码还是在开发者工具里边运行的，不是在真机里边运行，只是视图层渲染在真机上

2019-08-06 14:28
菜鸡 (作者)

回复 DCloud_UNI_FXY: 应该没这么高端,还能把渲染代码和渲染效果分离,点击真机运行的时候有看到编译代码&上传代码的提示,应该是在编译代码过程中加了兼容代码,不过问题已经解决了,见http://ask.dcloud.net.cn/article/36244

2019-08-07 17:27
菜鸡 (作者)

回复 DCloud_UNI_FXY: 话说能不能给解决的帖子加个精华啊

2019-08-07 17:28

DCloud_UNI_FXY

你最终提供的方案是可以解决问题，只是会增加代码体积（小程序平台已经内置了很多 es6 支持），建议不要使用 usage 模式，还是手动 import 你需要的 polyfill
可以考虑在方案 1 上做文章。兼容 corejs 的底层实现就行了，比如，在生成后的 app.js 最前边加上这段代码即可让小程序（仅测试了微信小程序）兼容 corejs 的 polyfill。

const global = Function('return this')()  
global.Math = Math  
global.Array = Array  
//...

菜鸡 (作者)

个人认为微信小程序上最坑的就是Function('return this')(),

没有之一,微信小程序在开发工具控制台打印一下Function,

就会发现会被微信小程序把Function改写成了:

ƒ t(){if(0<arguments.length&&"return this"===arguments[arguments.length-1])return function(){return n}}

return n里面的n就是一个空的{}.

目前我改的uni-app-core-js就是把core-js里面取全局变量的地方进行了你那样说的改造.

但是这有个问题就像我在解决方案里说到的那样.

没办法兼容浏览器(webview)不支持的构造函数/数据结构,

比如浏览器(webview)可能不支持Promise,

那uni-app-core-js也没办法给浏览器(webview)加上Promise支持

还有增加代码体积的问题,

比较了一下加上(uni-app-)core-js前后的体积

多了40kb左右

但是我觉得主要的问题还是不知道小程序平台内置的es6支持是基于哪个浏览器标准的

如果知道了基于什么浏览器标准

那就能写上正确的browserlist

从而就不会添加一些没必要的兼容代码

最终就能减少代码体积

2019-08-09 09:25
DCloud_UNI_FXY

回复菜鸡: 问题就是你说的那样，小程序内部重写了 Function,所以临时绕过就是跟它的空{}挂上 Array 等等

目前小程序官网列的已支持 es6 的 api 列表其实不全，很多其实都支持，但是没有列上，所以也没办法根据他的文档做兼容。在 uni-app 里边，browserslist 是 android 4.4 ios8 ,策略是小程序上不主动添加 polyfill，其他平台要么内置，要么编译时自动添加 polyfill

2019-08-09 11:38
菜鸡 (作者)

回复 DCloud_UNI_FXY: 刚刚看到了微信官方的kbone框架,\

里面有些demo,

在demo里的package.json中看到了browserslist配置

大多都写的是
```
[  

    "> 1%",  

    "last 2 versions",  

    "not ie <= 8"  

  ]
```
不过看起来兼容的版本还是比较低的

都得从ie9开始兼容

具体啥样还没试过

2019-08-09 14:58
菜鸡 (作者)

https://github.com/wechat-miniprogram/kbone/tree/develop/examples

2019-08-09 14:58
DCloud_UNI_FXY

回复菜鸡: 现在 cli 已经更新，支持直接引入 corejs 的 polyfill，就是现在可以直接使用方案 1

2019-08-09 20:11
weison

回复 DCloud_UNI_FXY: 您好，你能给个引入的参考代码吗？

2019-09-03 16:41

该问题目前已经被锁定, 无法添加新回复

【报Bug】在uniapp项目中使用了es6新方法无法兼容的问题(已解决)

使用vuecli创建的项目,在项目中使用了es6新方法

一、尝试过在`./src/main.js`中写

二、尝试过在`./babel.config.js`中的`@vue/app`配置中写polyfills

2 个回复

公告

相关问题

【报Bug】在uniapp项目中使用了es6新方法无法兼容的问题(已解决)

使用vuecli创建的项目,在项目中使用了es6新方法

一、尝试过在./src/main.js中写

二、尝试过在./babel.config.js中的@vue/app配置中写polyfills

相关链接 ：

与内容相关的链接

2 个回复

公告

相关问题

一、尝试过在`./src/main.js`中写

二、尝试过在`./babel.config.js`中的`@vue/app`配置中写polyfills

相关链接：