找不到 webpack es6 模塊

Question

我是 webpack 的新手，想捆綁我的 js 類我正在使用 es6 類和 linqjs.min、jquery-3.4.1.js 和 gsap.min 作為初學者我只想捆綁 index.js 和我的類，但我得到了錯誤未找到模塊：無法在我的 index.js 中的 src 目錄中解析 (myclass) 以導入類：

import myClass from 'js/myClass'

並導出我使用的課程

export class myClass{ }和module.export= myClass

我的 webpack.config.js 是：

const HTMLWebPackPlugin = require ('html-webpack-plugin');
module.exports = {
module:{
    rules:[
        {
            test: /\.js$/,
            exclude:/node_modules/,
            use:{
                loader:"babel-loader"
            }
        },
        {
            test:/\.html$/,
            use:[{
                loader:"html-loader",
                options:{minimize:true}
            }]
        }
    ]
},
plugins:[
    new HTMLWebPackPlugin({
        template:"./src/index.html",
        filename: "./index.html"
    })
]}

我不明白我的錯誤我該如何解決。 謝謝。

Answer 1

您正在嘗試執行默認導入，而您正在執行命名導出。

要么使用默認導出，添加default關鍵字：

export default class MyClass {}

隨着

import MyClass from './js/MyClass.js';

或者，使用命名的導出/導入：

export class MyClass {}

和

import { MyClass } from './js/MyClass.js';

請注意，按照慣例，類名以大寫字母開頭。

Medium 有一篇關於區別的好文章： https : //medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910