Webpack沒有捆綁匯入和使用的功能

我試圖在我的函式中包含和使用BootstrapCookieConsentSettingsnpm 包bootstrap-cookie-consent-settings中的函式，initConsentBanner但 webpack 總是將其丟棄并且不包含它，即使它在參考的 entry.js 檔案中使用。為什么不包括在內？

webpack.config.js：

module.exports = {
  // webpack folder’s entry js — excluded from jekll’s build process.
  entry: "./_webpack/entry.js",
  output: {
    path: __dirname   "/assets",
    filename: "js/bundle.js",
    library: "phasmo"
  },
/*  stats: {
    optimizationBailout: true
  }, */
  module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
    ]
  }

_webpack/entry.js：

import "bootstrap";
import "expose-loader?exposes=panzoom!panzoom";

import {BootstrapCookieConsentSettings} from "bootstrap-cookie-consent-settings";

export function fitMap(elem, mapclass = 'svgmap') {
      var mwidth = elem.getAttribute("width")
      var mheight = elem.getAttribute("height")
      elem.setAttribute("viewBox", "0 0 " mwidth " " mheight)
      elem.classList.add(mapclass)
}

export var map_layers = new Map();

function setInvisible(layer, button) {
    layer.setAttribute('visibility', 'hidden');
    button.classList.remove('active')
}

function setVisible(layer, button) {
    layer.setAttribute('visibility', 'visible');
    button.classList.add('active')
}

export var matomo = null;

function matomoLoaded() {
  matomo = window['_paq'];
  return typeof matomo == 'object';
}

export function trackInteraction(elem, interaction_name = null) {
  if(matomoLoaded()) {
    matomo.push(['trackContentInteractionNode', elem, interaction_name]);
  }
}

export var cconsent = null;

export function initConsentBanner() {
  cconsent = new BootstrapCookieConsentSettings({
    autoShowDialog: true, // disable autoShowModal on the privacy policy and legal notice pages, to make these pages readable
    lang: navigator.language, // the language, in which the modal is shown
    languages: ["en", "de"], // supported languages (in ./content/), defaults to first in array
    contentURL: "./content", // this URL must contain the dialogs content in the needed languages
    cookieName: "cookie-consent-settings",  // the name of the cookie in which the configuration is stored as JSON
    cookieStorageDays: 365, // the duration the cookie configuration is stored on the client
    postSelectionCallback: undefined // callback function, called after the user has made his selection
  });
}

export function allInvisible(elem) {
  for (let map_layer of map_layers.values()) {
    setInvisible(map_layer.layer, map_layer.button)
  }
  trackInteraction(elem);
}

export function allVisible(elem) {
  for (let map_layer of map_layers.values()) {
    setVisible(map_layer.layer, map_layer.button)
  }
  trackInteraction(elem);
}

export function toggleVisibility(elem, lname) {
  var layer = map_layers.get(lname).layer
  var button = map_layers.get(lname).button
  if(layer.getAttribute('visibility') == "hidden") {
    setVisible(layer, button)
    trackInteraction(elem, 'SetVisible');
  } else {
    setInvisible(layer, button)
    trackInteraction(elem, 'SetInvisible');
  }
}

export function mapLayerButton(elem, map, layername) {
      console.log("Adding button for " layername)
      var layer = map.querySelector('[inkscape\\:label="' layername '"]')
      if (layer === null) {
        console.log("Layer " layername  " not found in SVG")
        return false
      }
      var layer_elem = document.createElement("li")
      layer_elem.innerHTML = '<button type="button"  data-track-content data-content-ignoreinteraction data-content-name="Layer Dropdown" data-content-piece="' layername '" onClick="phasmo.toggleVisibility(this, \'' layername '\')">' layername '</button>'
      var button = layer_elem.querySelector('button')
      button.classList.add('active')
      map_layers.set(layername, {'button': button, 'layer': layer})
      elem.appendChild(layer_elem)
      if(matomoLoaded()) {
        matomo.push(['trackContentImpressionsWithinNode', layer_elem]);
      }

編譯它：

 $ npx webpack-cli build --mode production                     asset js/bundle.js 97.1 KiB [compared for emit] [minimized] (name: main) 1 related asset
orphan modules 212 KiB [orphan] 59 modules
runtime modules 891 bytes 4 modules
cacheable modules 269 KiB
  modules by path ./node_modules/panzoom/ 35.5 KiB
    modules by path ./node_modules/panzoom/lib/*.js 7.27 KiB 5 modules
    modules by path ./node_modules/panzoom/*.js 28.3 KiB
      ./node_modules/expose-loader/dist/cjs.js?exposes=panzoom!./node_modules/panzoom/index-exposed.js 423 bytes [built] [code generated]
      ./node_modules/panzoom/index.js 27.9 KiB [built] [code generated]
  ./_webpack/entry.js   56 modules 214 KiB [built] [code generated]
  ./node_modules/bootstrap-cookie-consent-settings/src/bootstrap-cookie-consent-settings.js 8.2 KiB [built] [code generated]
  ./node_modules/expose-loader/dist/runtime/getGlobalThis.js 699 bytes [built] [code generated]
  ./node_modules/wheel/index.js 876 bytes [built] [code generated]
  ./node_modules/amator/index.js 3.67 KiB [built] [code generated]
  ./node_modules/ngraph.events/index.js 2.59 KiB [built] [code generated]
  ./node_modules/bezier-easing/src/index.js 3.35 KiB [built] [code generated]
webpack 5.31.2 compiled successfully in 11847 ms

嘗試initConsentBanner()在網站上撥打電話時：

Uncaught TypeError: Ki.BootstrapCookieConsentSettings is not a constructor
    so bundle.js:4930
    <anonymous> (index):7371
bundle.js:4930
    so bundle.js:4930
    <anonym> (index):7371

有誰知道如何解決這一問題？我嘗試了一千件事，但我不知道如何解決這個問題。

uj5u.com熱心網友回復：

如果查看bootstrap-cookie-consent-settings( source code ) 的源代碼，您會發現該BootstrapCookieConsentSettings函式沒有匯出。因此entry.js，當您嘗試匯入它時，它在您的 中不可見。

您可以簡單地修改 中的函式node_modules/bootstrap-cookie-consent-settings/src/bootstrap-cookie-consent-settings.js，以便該函式對您的代碼可見：

export function BootstrapCookieConsentSettings(props) {

然后您的代碼將能夠構造一個新的匯出函式BootstrapCookieConsentSettings物件。

標籤：javascript 网络包

上一篇：Webpack代碼是否在switch陳述句中拆分？

下一篇：在MSAccess中將數字與當前月份進行比較