如何从构建中排除 vuetify 和 vue？

Question

我通过 VueCLI 创建一个自定义库。我想通过在最终包中不包含 vuetify 和 vue.js 来减少构建的大小。

我的最终构建文件（*.umd.min.js）在使用命令构建时工作正常：

vue-cli-service build --inline-vue --target lib --formats umd-min ./src/components/Component.vue

如果我将 vuetify 和 vue.js 外部化，那么当我连接库时会出现错误：

Cannot read property 'extend' of undefined

在 vuetify 库中

如何从构建中删除 vuetify 和 vue.js？

Answer 1

我使用构建命令：

vue-cli-service build --target lib --formats umd-min ./src/components/Component.vue

并在核心应用程序中全局注册 vuetify 组件。

Answer 2

我能够按照此处指南中的说明使用卷起来做到这一点。

https://blog.harveydelaney.com/creating-your-own-vue-component-library/

关键是确保 vuetify 列在 package.json 的 peerDependencies 中。

Answer 3

你可以使用

configureWebpack: {
    resolve: {
      symlinks: false,
      alias: {
        vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      }
    }
  },

在应用程序的 vue.config.js 中使用该库。

Answer 4

我可以通过 babel.config.js.

的以下设置来避免此错误

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

我有一个不包含 vue 和 vuetify 的库，因为将它们用作外部对象：

有关更多详细信息，请参阅此存储库。