在 vue 項目（使用 vue-cli 創建）中全局（瀏覽器）導入和評估 node_modules 腳本

Question

我有一個由 vue-cli (v3.11) 創建的 vue 項目 (v2.6, + vuex, vue-router, webpack) - https://gitlab.com/Tech4Comp/eas.lit-ui/tree /a71b84b732b408d8b292918bc8e6db9f0a1133e6

我正在嘗試包含一個第三方庫（在文件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的依賴項。

嘗試克隆 repo（注意我提到的分支和提交），安裝依賴項並通過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 中，僅僅因為它們曾經是一個嵌套的依賴，這是一條通往瘋狂和破壞代碼的道路。

您在 main.js 文件中import庫是正確的。 確保您可以訪問 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 個解決方案

解決方案1
0 2019-12-04 09:59:08

在 vue 項目（使用 vue-cli 創建）中全局（瀏覽器）導入和評估 node_modules 腳本

問題描述

1 個解決方案

解決方案1 0 2019-12-04 09:59:08

解決方案1
0 2019-12-04 09:59:08