Question

我正在使用由vue-cli（v3.11）-https://gitlab.com/Tech4Comp/eas.lit-ui/tree/a71b84b732b408d8b292918bc8e6db9f0a1133e6

创建的vue项目（v2.6，+ vuex，vue-router，webpack）

我正在尝试在文件src/components/oidcButton.vue中包含一个第三方库-"openidconnect-signin": "git://github.com/rwth-acis/openidconnect-signin.git#global-oidc"-希望在浏览器中可以使用一些全局变量（不仅限于vue上下文）。其中之一是“ UserManager”，应由“ oidc-client”-/node_modules/oidc-client/lib/oidc-client.js来提供，它是openidconnect-signin的依赖项。

尝试克隆存储库（请注意我提到的分支并提交），安装依赖项并通过npm run serve执行项目，您将在浏览器控制台中注意到问题。

我真正想做的是：

<html>
  <head>
    ...
    <script src="/node_modules/oidc-client/lib/oidc-client.js"></script>
  </head
  ...
</html>

如https://github.com/rwth-acis/openidconnect-signin/blob/global-oidc/README.md中所述。

不幸的是，vue-cli-service serve不会发布node_modules目录（这很有意义）。因此，我试图找到一种通过vue / vue-head /一些webpack技巧（脚本加载器，填充，其他我不记得的工具）和更多库来完成任务的方法。例如。通过在main.js中导入文件，将其作为脚本标签添加到App.vue中，等等。不幸的是，我对webpack不太熟悉，vue已经在做很多webpack的工作，我没有不想干涉。我最终感到沮丧，并将文件从node_modules文件夹复制到公用文件夹（按原样提供）。但这不是解决方案。...

在浏览器中全局导入和评估文件而不将其复制到公用文件夹的正确方法是什么？

Answer 1

在不将依赖项指定为自己的依赖项的情况下，您真的不应依赖它们。如果您需要访问oidc-client/lib/oidc-client.js，则将oidc-client指定为依赖项。仅仅假设这些库永远永久地存在于您的node_modules中，仅仅因为它们曾经是嵌套的依赖项，才是通往疯狂和破坏代码的道路。

import将main.js文件中的库带进了正确的轨道。确保您可以访问Webpack世界中唯一的明智方法是将它们导入其中。通过<script>标签添加库在Webpack中并不总是能很好地发挥作用，并且您的工作量可能有所不同。

如果图书馆希望在全球范围内销售，则摆弄绝对是必经之路。尝试这样的事情：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new webpack.ProvidePlugin({
      oidc_client: 'oidc-client',
    }),
  ],
};

然后再

oidc_client.UserManager

看看哪里能找到你。

在vue项目（使用vue-cli创建）中全局导入和评估node_modules脚本（浏览器）

1 个答案: