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

在VueCLI生成的项目的public/index.html中，使用以下命令从CDN导入Lodash：
```
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
```
在库组件（src/components/HelloWorld.vue）中，可以{strong>全局使用_，而无需导入lodash 。例如，显示以msg格式化_.camelCase道具的计算属性。
为避免出现棉绒错误，请将_指定为ESLint global（/* global _ */）。

在vue.config.js中，将Webpack配置为外部化lodash：

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

在package.json中，将build脚本编辑为：

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

运行npm run build，然后编辑dist/demo.html，使其上面也包含<script>标签。
在dist（例如python -m SimpleHTTPServer）中启动HTTP服务器，然后打开dist/demo.html。观察_.camelCase（从第2步开始）的效果，而不会出现控制台错误。

GitHub demo

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

1 个答案: