众所周知,小程序的全局对象跟browser的全局对象不同,所以lodash使用browser全局对象下的api会报错。这就需要在uniapp中根据小程序环境引入polyfill。要特殊处理的东西不是很多,就是把Array,DataView等等这些api挂在到小程序环境下的global中。
大部分都会选择直接在项目中实现这个polyfill,那么问题又来了,在项目中定义的ployfill引入执行始终会在npm包之后。因为npm包会被打包到vendor中,这个包因为包含了uniapp的运行时,所以被提前导入。这样的话引入lodash,lodash初始化执行获取全局对象global对应api的时候,ployfill还没有被导入执行,所以还是会报错。想要解决这个问题,最好的方法就是使用npm包的ployfill并提前于lodash导入。
我自己已经构建发布了一个npm包 lodash-miniprogram-polyfill 可以直接使用。想要自己实现也可以,不过都需要发布成一个npm包。
使用的时候也有说法,因为ployfill必须要早于lodash初始化执行前被执行,所以推荐在一个文件中先导入ployfill,同时导入导出lodash的api,项目中使用的时候就直接从这个文件中导入lodash就行了,有类型推断的话也能保留。推荐使用lodash-es,这样可以按需导入,减少打包的体积。
示例
-/src/utils/lodashFix.ts
// #ifdef MP-WEIXIN
import 'lodash-miniprogram-polyfill'
// #endif
export * from 'lodash-es'
-/src/pages/index/index.vue
<script setup lang="ts">
import { throttle } from '@/utils/lodashFix'
</script>
2 个评论
要回复文章请先登录或注册
1***@qq.com (作者)
y***@163.com