解决uniapp使用vant-weapp开发微信小程序的坑

这篇文章主要是为使用uniapp和vant-weappui库的童鞋解决一个痛点。git

使用过uniapp开发微信小程序的都知道uniapp内置了es6转es5，若是开启了小程序的es6转es6，那么会致使一些不可预计的语法错误，例如async/await没法使用。es6

可是若是关闭小程序的es6转es5，那么存放于static目录vant-weapp的组件没法被编译成es5,致使使用组件报错。github

核心缘由:小程序

因为vant-weapp的模块化机制为import/export,小程序的模块化是require/module.exports微信小程序

知道缘由就好解决了，改源码。手动将引入的组件和组件所依赖的js所有修改成require/module.exports微信

例子:app

一、先修改引入处，iphone

// 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');
复制代码

二、再修改导出处，async

// vant/dist/common/components.js
// ----修改前----
export { VantComponent }
// ----修改后----
module.exports = { VantComponent }
复制代码

根据例子，修改完全部引用的文件，便可在不和uniapp的es6编译冲突的状况下使用。模块化

若是以为这样改很难受，能够去vant-weapp的github骚扰他们反馈。

做者会持续更新遇到的坑和解决方案