1***@qq.com
1***@qq.com
  • 发布:2023-01-16 11:03
  • 更新:2023-06-16 17:13
  • 阅读:3126

在uniapp中使用lodash

分类:uni-app

众所周知,小程序的全局对象跟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 关注 分享
y***@163.com HRK_01

要回复文章请先登录注册

1***@qq.com

1***@qq.com (作者)

回复 y***@163.com :
最好不要动原始类型的原型链,贴下你的代码看下,我这边都正常
2023-06-16 17:13
y***@163.com

y***@163.com

用这个库后依然报错, 加上如下代码在我的环境可行
Object.defineProperty(Object.prototype, 'Date', {
value: Date,
enumerable: false,
writable: false,
configurable: false
})
2023-05-03 17:45