解決uniapp使用vant-weapp開發微信小程序的坑

vant-weapp已經提供es5版本，而且uniapp已提供更優秀的編譯方案

這篇文章主要是爲使用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

例子:

一、先修改引入處，

// 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');
複製代碼

二、再修改導出處，

// vant/dist/common/components.js
// ----修改前----
export { VantComponent }
// ----修改後----
module.exports = { VantComponent }
複製代碼

根據例子，修改完全部引用的文件，便可在不和uniapp的es6編譯衝突的狀況下使用。

若是以爲這樣改很難受，能夠去vant-weapp的github騷擾他們反饋。

做者會持續更新遇到的坑和解決方案