使用Vue Web组件访问Webpack外部库

Question

我使用vue-cli.3创建一个Web组件，以便使用以下命令在其他项目中使用它：

vue-cli-service build --target lib --name helloworld ./src/components/HelloWorld.vue

该组件依赖于lodash。我不想将lodash与组件捆绑在一起，因为lodash将由宿主应用程序提供，所以我在vue.config.js中配置webpack，如下所示：

module.exports = {
    configureWebpack: {
        externals: {
            lodash: 'lodash',
            root: '_'
        }
    }
}

所以这样，我成功编译了没有lodash的组件。

在宿主应用程序（将使用该组件的应用程序）中，我将新创建和编译的组件的源路径添加到index.html中：

<script src="http://localhost:8080/helloworld.umd.js"></script>

在App.vue中注册组件：

<template>
    <div id="app">
        <demo msg="hello from my component"></demo>
    </div>
</template>

<script>
export default {
    name: "app",
    components: {
        demo: helloworld
    }
};
</script>

helloworld组件呈现没有问题。组件的每个功能都可以正常工作，但只要我称之为lodash方法，我就会得到;

Uncaught TypeError: Cannot read property 'camelCase' of undefined

这意味着组件无法访问主机应用程序使用的lodash库。

我需要找到一种方法来从组件中使用主机应用程序中已经捆绑的库。

有办法吗？

Answer 1

您使用的Vue配置应该可以工作（请参阅GitHub demo），因此您的设置中可能缺少某些内容。我列出了到达演示的相关步骤：

1. 在VueCLI生成的项目的public/index.html中，从CDN导入Lodash： <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
2. 在库组件（src/components/HelloWorld.vue）中，可以在不导入_的情况下使用lodash全局。例如，显示使用msg格式化_.camelCase prop的计算属性。
3. 为避免lint错误，请将_指定为ESLint global（/* global _ */）。
4. 在vue.config.js中，配置Webpack以外化lodash：

   module.exports = {
     configureWebpack: {
       externals: {
         lodash: {
           commonjs: 'lodash',
           amd: 'lodash',
           root: '_' // indicates global variable
         }
       }
     }
   }

5. 在package.json中，编辑build脚本为： "build": "vue-cli-service build --target lib --name helloworld ./src/components/HelloWorld.vue",
6. 运行npm run build，然后编辑dist/demo.html以包含上面的<script>标签。
7. 在dist中启动HTTP服务器（例如，python -m SimpleHTTPServer），然后打开dist/demo.html。在没有控制台错误的情况下观察_.camelCase（来自步骤2）的效果。

GitHub demo