使用 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 演示），因此您的设置中可能缺少某些内容。我列出了实现演示的相关步骤：

1. 在public/index.htmlVueCLI 生成的项目中，使用以下命令从 CDN 导入 Lodash：

   <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
   

2. 在库组件( src/components/HelloWorld.vue)中，无需导入_即可使用全局。例如，显示一个计算属性，该属性使用.lodashmsg_.camelCase

3. 为了避免 lint 错误，请指定_为ESLint 全局( /* 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在（例如python -m SimpleHTTPServer）中启动 HTTP 服务器，然后打开dist/demo.html. 观察（来自步骤 2）的效果_.camelCase，没有控制台错误。

GitHub 演示