(虽然我是在自己的项目中第一次发现这个问题,但是后来测试了 element-ui 与 iview 其实都存在相同的情况,所以这不是我自己的 lib 的问题)
我有一个使用 webpack 导出的 lib 项目:
// webpack config
{
...
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
output: {
...
libraryTarget: 'umd'
},
...
}
然后我想要在 Vue.js 的官方 browserify template 项目中使用它:
// main.js
import Vue from 'vue'
import * as mylib from 'mylib'
Vue.use(mylib)
然后问题就来了。项目本体使用的是 vue.common.js
构建,而 lib 却使用了 vue.runtime.common.js
构建。
更甚者,无论我怎么更改项目本体的构建依赖,插件将始终使用 vue.runtime.common.js
构建。
如果我同时在项目本体中与 lib 中执行 console.log(Vue.version, typeof Vue.compile)
,将得到如下的结果:
可以看到控制台中同时出现了 vue.common.js
与 vue.runtime.common.js
的输出,项目本体中 typeof Vue.compile
为 function
, 但是在 lib 中为 undefined
.
为什么会这样?我要如何保证 lib 能够跟项目本体获取到一样的 Vue 构建?