个人中心
gpt4 book ai didi

javascript - Webpack:在 index.html 上未定义导出默认类

转载 作者：行者123 更新时间：2023-12-04 07:55:46 25 4
gpt4 key购买 nike

我是 Webpack 的新手。
我有一个我正在导出并尝试在我的 index.html 上实例化的类。
(这是原始线程的更新版本)

"use strict";

import {TimelineModule} from "./modules/timeline.module.js";
import {NavigationModule} from './modules/navigation.module.js';
import {FiltersModule} from "./modules/filters.module.js";
import VGLogger from "./modules/logger.module.js";
import {DataSourcesModule} from "./modules/data-sources.module.js";
import {EventsModule} from "./modules/events.module.js";


export default class extends EventsModule {
    constructor(params = null) {
        super();
        this.gridTimeline = null;
        this.gridNavigation = null;
        this.gridFilters = null;
        this.dataSources = new DataSourcesModule();
        this.uniqueID = (((1+Math.random())*0x10000)|0).toString(16).substring(1);

        this.settings.gridSettings = {
            ...this.settings.gridSettings,
            ...params
        };

        VGLogger.log(`New VanillaGrid Instance Created!`, `log`);
    }

    create(gridDOMIdentifier) {
        this.#setWrapper(gridDOMIdentifier);
        this.#renderNavigation();
        this.#renderFilters();
        this.#renderTimeline();
        this.initEvents();
    }

    #renderTimeline() {
        this.gridTimeline = new TimelineModule(this.gridWrapper);
    }

    #renderNavigation() {
        this.gridNavigation = new NavigationModule(this.gridWrapper, this.getSettingValue('navigation'));
    }

    #renderFilters() {
        this.gridFilters = new FiltersModule(this.gridWrapper);
    }

    #setWrapper(wrapper) {
        this.gridWrapper = document.querySelector(wrapper);
        const wrapperClass = this.getSettingValue('wrapperClass');
        this.gridWrapper.classList.add(`${wrapperClass}`);
        this.gridWrapper.classList.add(`vg-${this.uniqueID}`);
    }
}
我的 library.js 文件如下所示: 
const VanillaGrid = require('./index.js').default;
module.exports = VanillaGrid;
// Based on this post -> https://www.seancdavis.com/blog/export-es6-class-globally-webpack/
我的配置文件如下所示: 
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        library: "VanillaGrid",
        libraryTarget: "var"
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    },
    entry: {
        main: ['./src/library.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'sample/index.html'
        }),
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            '@babel/plugin-syntax-class-properties',
                            '@babel/plugin-proposal-private-methods'
                        ]
                    }
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            },
        ],
    },
};
和 .babelrc: 
{
"sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-class-properties"
  ]
}
我的 index.html 看起来像这样: 
<html>
<head>
  <title>Samples</title>
  <script defer src="bundle.js"></script>
</head>
<body>
</body>
</html>
事情是 VanillaGrid 在我的 index.html 上未定义，无法弄清楚原因。
在 Webpack 的流程上放置了一些断点，并且可以从 Webpack 内部访问该类，但我需要作为全局构造函数访问它。

更新:
所以，一直在分析结果包，在它的最后一行中有这个: 
// startup
/******/    // Load entry module and return exports
/******/    // This entry module is referenced by other modules so it can't be inlined
/******/    __webpack_require__("./src/library.js");
/******/    var __webpack_exports__ = __webpack_require__("./node_modules/webpack-dev-server/client/index.js?http://localhost:9000");
/******/    VanillaGrid = __webpack_exports__;
它正在将这个似乎是 Webpack 开发服务器一部分的其他文件分配给我的插件的全局变量。
这似乎与 webpack-dev-server 相关。
有什么想法吗？

最佳答案

我已经尝试过你的代码的这个简化版本，它工作得很好:

"use strict";

export default class {
    constructor(params = null) {
        this.gridTimeline = null;
        this.gridNavigation = null;
        this.gridFilters = null;
        this.uniqueID = (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }

    create(gridDOMIdentifier) {
        this.#setWrapper(gridDOMIdentifier);
        this.#renderNavigation();
        this.#renderFilters();
        this.#renderTimeline();
        this.initEvents();
    }

    #renderTimeline() {

    }

    #renderNavigation() {

    }

    #renderFilters() {

    }

    #setWrapper(wrapper) {

    }
}
package.json: 
"devDependencies": {
  "@babel/core": "^7.13.16",
  "@babel/plugin-proposal-class-properties": "^7.13.0",
  "@babel/plugin-proposal-private-methods": "^7.13.0",
  "@babel/plugin-syntax-class-properties": "^7.12.13",
  "@babel/preset-env": "^7.13.15",
  "babel-loader": "^8.2.2",
  "css-loader": "^5.2.4",
  "html-webpack-plugin": "^5.3.1",
  "webpack": "^5.35.1",
  "webpack-cli": "^4.6.0"
}
这是带有一些测试代码的输出: 

// Beginning of webpack output

var VanillaGrid;
(() => {
  var t = {
    352: (t, e, n) => {
      "use strict";
      function i(t, e) {
        for (var n = 0; n < e.length; n++) {
          var i = e[n];
          i.enumerable = i.enumerable || !1,
          i.configurable = !0,
          "value" in i && (i.writable = !0),
          Object.defineProperty(t, i.key, i)
        }
      }
      function r(t, e, n) {
        if (!e.has(t))
          throw new TypeError("attempted to get private field on non-instance");
        return n
      }
      n.d(e, {
        Z: () => u
      });
      var a = new WeakSet,
      o = new WeakSet,
      s = new WeakSet,
      l = new WeakSet,
      u = function () {
        function t() {
          (function (t, e) {
            if (!(t instanceof e))
              throw new TypeError("Cannot call a class as a function")
          })(this, t),
          l.add(this),
          s.add(this),
          o.add(this),
          a.add(this),
          this.gridTimeline = null,
          this.gridNavigation = null,
          this.gridFilters = null,
          this.uniqueID = (65536 * (1 + Math.random()) | 0).toString(16).substring(1)
        }
        var e,
        n;
        return e = t,
        (n = [{
              key: "create",
              value: function (t) {
                r(this, l, d).call(this, t),
                r(this, o, h).call(this),
                r(this, s, f).call(this),
                r(this, a, c).call(this),
                this.initEvents()
              }
            }
          ]) && i(e.prototype, n),
        t
      }
      ();
      function c() {}
      function h() {}
      function f() {}
      function d(t) {}
    },
    509: (t, e, n) => {
      var i = n(352).Z;
      t.exports = i
    }
  },
  e = {};
  function n(i) {
    var r = e[i];
    if (void 0 !== r)
      return r.exports;
    var a = e[i] = {
      exports: {}
    };
    return t[i](a, a.exports, n),
    a.exports
  }
  n.d = (t, e) => {
    for (var i in e)
      n.o(e, i) && !n.o(t, i) && Object.defineProperty(t, i, {
        enumerable: !0,
        get: e[i]
      })
  },
  n.o = (t, e) => Object.prototype.hasOwnProperty.call(t, e);
  var i = n(509);
  VanillaGrid = i
})();

// End of webpack output

// Beginning of the test code

const grid = new VanillaGrid;

console.log(grid.uniqueID);

如果您的问题是该类不能在同步中立即可用 script标签，尝试添加 scriptLoading: "blocking"在 HtmlWebpackPlugin配置以删除 defer来自生成的 script 的属性标签。
如果这不能回答您的问题，您应该在 bundle.js 上添加详细信息。输出以及如何尝试使用生成的代码。

关于javascript - Webpack:在 index.html 上未定义导出默认类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66712919/

25 4 0
文章推荐： python-3.x - 拆分 Pandas 列中的 float 列表后，获取精确的十进制整数
文章推荐： javascript - Ajax 将数据传递给 ASP.NET Controller
文章推荐： r - 如何使 PCA 矢量箭头加粗(更宽)？
文章推荐： 从 R 中的字符串中间删除数字
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com