I'm new to Webpack.
I have a class that I'm exporting and trying to instantiate on my index.html. (This is an updated version of the original thread)
"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}`);
}
}
My library.js file looks like:
const VanillaGrid = require('./index.js').default;
module.exports = VanillaGrid;
// Based on this post -> https://www.seancdavis.com/blog/export-es6-class-globally-webpack/
My config file looks like this:
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",
],
},
],
},
};
And .babelrc:
{
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"loose": true
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-class-properties"
]
}
My index.html looks like this:
<html>
<head>
<title>Samples</title>
<script defer src="bundle.js"></script>
</head>
<body>
</body>
</html>
Thing is that VanillaGrid is undefined on my index.html and can't figure out why. Placed some breakpoints on Webpack's flow, and the class is accessible from within Webpack, but I need to access to it as a global constructor.
from Webpack: export default class is not defined on index.html
No comments:
Post a Comment