vue-cli创建uni-app使用es6新语法的兼容方法

解决方法见最后

解决代码见github,点我跳转

在项目中使用了es6新方法

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

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

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

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

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

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

但是最终打包出来的代码 没有 flatMap相关兼容代码
(见下图)

三、解决办法

舍弃上面的解决过程
直接安装如下两个npm库

• uni-app-polyfills-presets
• uni-app-core-js

重要:在上面两个依赖的github里 点一下star 有利于解决bug :)

npm install uni-app-polyfills-presets@1.0.0  
npm install uni-app-core-js@1.0.0

然后在./babel.config.js里写

module.exports = {  
  presets: [  
    // 上面的代码略...  
    [  
      'module:uni-app-polyfills-presets',  
      {  
        // 如果写usage那么将是按实际使用情况引入兼容库  
        // 参数具体解释请前往https://babeljs.io/docs/en/babel-preset-env查看  
        useBuiltIns: 'usage'  
      }  
    ]  
    // 下面的代码略...  
  ],  
  plugins  
}

最终打包&上传到小程序平台之后