Question

我需要使用Vue应用程序创建Vue库。我需要它，以便可以包含它并在未安装Vue的网站上运行整个应用程序。也就是说，该库需要独立。

在vue站点上的文档后面显示...

关于Vue依赖的说明

在Web组件模式下，Vue已外部化。这意味着即使您的代码导入了Vue，捆绑也不会捆绑Vue。该捆绑包将假定Vue作为全局变量在主页上可用。

我希望构建Vue时不依赖Vue。我的主机页面不能将Vue作为全局对象。

在老派看来，我希望应用程序“编译”为js。这可能吗？

Answer 1

您应该使用Rollup或Webpack将Vue.js库作为UMD模块进行捆绑，该模块实质上是完全包含的代码，没有任何外部依赖性。

例如，当您authoring library using Webpack时，通常会：

const path = require('path');

module.exports = {
  entry: './src/lib.js',

  output: {

    // Bundle will be generated in `dist` folder
    path: path.resolve(__dirname, 'dist'),

    // This will the name of your library's bundled file
    filename: 'lib-bundle.js',

    // Your own library will be available globally with `LibName`
    library: 'LibName',

    // Ensure to generate UMD bundle
    libraryTarget: 'umd'
  },
  externals: { /* MAKE SURE THAT EXTERNALS IS EMPTY */ }
};

在上述配置中，由于配置externals为空，因此Webpack将所有依赖项（包括Vue和其他依赖项）捆绑到最终库捆绑中，以便您的主机环境不需要可用的Vue。

构建一个Vue库以在非Vue应用中运行

1 个答案: