菜鸡
菜鸡
  • 发布:2019-08-07 17:26
  • 更新:2022-01-24 10:32
  • 阅读:8598

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

分类:uni-app

解决方法见最后

解决代码见github,点我跳转

在项目中使用了es6新方法

如, ./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

三、解决办法

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

重要:在上面两个依赖的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  
}

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

0 关注 分享

要回复文章请先登录注册

5***@qq.com

5***@qq.com

回复 7***@qq.com :
我也报这个错,你最后怎么处理的?
2022-01-24 10:32
gweii

gweii

请问如果要使用其它babel插件应该怎么配置?比如babel-plugin-transform-es2015-arrow-functions
2021-12-13 08:02
7***@qq.com

7***@qq.com

ERROR Error: Cannot find module '@babel/preset-env/lib/defaults'
10:50:48.971 Error: Cannot find module '@babel/preset-env/lib/defaults'
10:50:48.975 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
10:50:48.976 at Function.Module._resolveFilename (D:\Work\ZhongHuanXinKe\70_Source\smart-mobile-cli\node_modules\module-alias\index.js:49:29)
10:50:48.982 at Function.Module._load (internal/modules/cjs/loader.js:507:25)
10:50:48.983 at Module.require (internal/modules/cjs/loader.js:637:17)
10:50:48.988 at require (internal/modules/cjs/helpers.js:22:18)
10:50:48.989 at Object.<anonymous> (D:\Work\ZhongHuanXinKe\70_Source\smart-mobile-cli\node_modules\uni-app-polyfills-presets\index.js:24:17)
10:50:48.995 at Module._compile (internal/modules/cjs/loader.js:689:30)
10:50:48.996 at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
10:50:49.000 at Module.load (internal/modules/cjs/loader.js:599:32)
10:50:49.001 at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
10:50:49.006 at Function.Module._load (internal/modules/cjs/loader.js:530:3)
10:50:49.006 at Module.require (internal/modules/cjs/loader.js:637:17)
10:50:49.012 at require (internal/modules/cjs/helpers.js:22:18)
10:50:49.013 at requireModule (D:\Work\ZhongHuanXinKe\70_Source\smart-mobile-cli\node_modules\@babel\core\lib\config\files\plugins.js:165:12)
10:50:49.018 at loadPreset (D:\Work\ZhongHuanXinKe\70_Source\smart-mobile-cli\node_modules\@babel\core\lib\config\files\plugins.js:83:17)
10:50:49.019 at createDescriptor (D:\Work\ZhongHuanXinKe\70_Source\smart-mobile-cli\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
2020-06-17 10:53
7***@qq.com

7***@qq.com

Error: Cannot find module '@babel/preset-env/lib/defaults'
2020-06-17 10:53