这篇文章主要是为使用uniapp和vant-weappui库的童鞋解决一个痛点。
使用过uniapp开发微信小程序的都知道uniapp内置了es6转es5,如果开启了小程序的es6转es6,那么会导致一些不可预计的语法错误,例如async/await无法使用。
但是如果关闭小程序的es6转es5,那么存放于static目录vant-weapp的组件无法被编译成es5,导致使用组件报错。
核心原因:
由于vant-weapp的模块化机制为import/export,小程序的模块化是require/module.exports
知道原因就好解决了,改源码。手动将引入的组件和组件所依赖的js全部修改为require/module.exports
例子:
1、先修改引入处,
// vant/dist/popup/index.js// -----修改前-------import { VantComponent } from '../common/component';import { transition } from '../mixins/transition';import { iphonex } from '../mixins/iphonex';// -----修改后-------const { VantComponent } = require('../common/component');const { transition } = require('../mixins/transition');const { iphonex } = require('../mixins/iphonex');复制代码2、再修改导出处,
// vant/dist/common/components.js// ----修改前----export { VantComponent }// ----修改后----module.exports = { VantComponent }复制代码根据例子,修改完所有引用的文件,即可在不和uniapp的es6编译冲突的情况下使用。
如果觉得这样改很难受,可以去vant-weapp的github骚扰他们反馈。
作者会持续更新遇到的坑和解决方案













