Javascript Webpack:未在index.html上定义导出默认类_Javascript_Webpack_Ecmascript 6

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

javascript webpack ecmascript-6

Javascript Webpack:未在index.html上定义导出默认类,javascript,webpack,ecmascript-6,Javascript,Webpack,Ecmascript 6,我对Webpack不熟悉我正在导出一个类，并试图在index.html上实例化它。（这是原始线程的更新版本） My library.js文件看起来像： const VanillaGrid = require('./index.js').default; module.exports = VanillaGrid; // Based on this post -> https://www.seancdavis.com/blog/export-es6-class-globally-webpa

我对Webpack不熟悉

我正在导出一个类，并试图在index.html上实例化它。（这是原始线程的更新版本）

My 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",
                ],
            },
        ],
    },
};

<html>
<head>
  <title>Samples</title>
  <script defer src="bundle.js"></script>
</head>
<body>
</body>
</html>

及.法改会：

{
"sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-class-properties"
  ]
}

My index.html如下所示：

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",
                ],
            },
        ],
    },
};

<html>
<head>
  <title>Samples</title>
  <script defer src="bundle.js"></script>
</head>
<body>
</body>
</html>

它将另一个似乎是Webpack开发服务器一部分的文件分配给我的插件的全局变量。这似乎与Web包开发服务器有关

有什么想法吗？

我已经尝试过您的代码的简化版本，它工作得非常好：

"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"
}

以下是一些测试代码的输出：

//网页包输出的开始
var VanillaGrid；
(() => {
变量t={
352:（t，e，n）=>{
“严格使用”；
功能i（t，e）{
对于（var n=0；nu
});
var a=新的弱点集，
o=新的弱集，
s=新的弱点集，
l=新的弱集，
u=函数（）{
函数t（）{
（功能（t，e）{
if（！（t实例of e））
抛出新类型错误（“无法将类作为函数调用”）
})（此，t），
l、 加上（这个），
s、 加上（这个），
o、 加上（这个），
a、 加上（这个），
this.gridTimeline=null，
this.gridNavigation=null，
this.gridFilters=null，
this.uniqueID=（65536*（1+Math.random（））| 0）.toString（16）.子字符串（1）
}
变量e，
N
返回e=t，
（n=[{
键：“创建”，
值：函数（t）{
r（this，l，d）。调用（this，t），
r（这个，o，h）。叫（这个），
r（这个，s，f）。调用（这个），
r（这个，a，c）。叫（这个），
this.initEvents（）
}
}
])&i（即原型，n），
T
}
();
函数c（）{}
函数h（）{}
函数f（）{}
函数d（t）{}
},
509:（t，e，n）=>{
VarI=n（352）.Z；
t、 出口=i
}
},
e={}；
函数n（i）{
var r=e[i]；
如果（无效0！==r）
出口退税；
变量a=e[i]={
导出：{}
};
返回t[i]（a，a，n），
a、 出口
}
n、 d=（t，e）=>{
用于（e中的变量i）
n、 o（e，i）&！n.o（t，i）&&对象定义属性（t，i{
可枚举：！0，
get:e[i]
})
},
n、 o=（t，e）=>Object.prototype.hasOwnProperty.call（t，e）；
var i=n（509）；
VanillaGrid=i
})();
//网页包输出结束
//测试代码的开头
const grid=新的VanillaGrid；
console.log（grid.uniqueID）您的HTML文件似乎没有加载网页包包？我的错，复制了文件的src版本。将其更新为webpack处理后的实际情况。可能还有其他问题，但至少是delay
这意味着main.js
在new SomeClass（）
之后才会运行。您可能还需要设置库的名称，以便执行new LibName（）
，因为它是您要导入的库，它的导出恰好是一个最初命名为SomeClass
的构造函数。已经这样做了，但是没有成功。有什么想法吗？似乎与开发服务器有关。检查包，结果将库正确分配给VanillaGrid全局变量。但是当我运行webpack dev server时，就是这种情况发生的时候。所以当你双击html文件以文件的形式打开它时：//
它工作了吗？如果我用Webstorm的run函数运行index.html，它工作了它对我来说工作了这个配置：devServer:{contentBase:path.join（u dirname，'dist'），compress:true，port:9000}
@Pablo我刚看到你给了我赏金。我很好奇你最终发现了什么问题吗？