無法從腳本標簽 HTML 中的 webpack bundle.js 導入模塊

Question

我使用 webpack 將捆綁器制作成我的 js 文件，以便在我的 django 項目中使用。 我使用從“npm i moment”獲得的 moment js。 我用這種配置制作了 webpack。

var path = require('path');

module.exports = {
    "mode" : "development",
    "entry" : "./index.js",
    "output" : {
        "path" : path.resolve(__dirname, "tugas/assets"),
        "filename" : "bundles.js",
        "clean" : true,
    },
};

這是我之前用於配置的 index.js。

import moment from 'moment';
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
console.log("boma1");

這是我的 package.json。

{
  "name": "Aplikasi-Database-Django",
  "version": "1.0.0",
  "description": "Tugas UAS Database Semester 7 2020",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/simasona123/Aplikasi-Database-Django.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/simasona123/Aplikasi-Database-Django/issues"
  },
  "homepage": "https://github.com/simasona123/Aplikasi-Database-Django#readme",
  "devDependencies": {
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "chart.js": "^3.1.0",
    "moment": "^2.29.1"
  }
}

據我所知，webpack 成功制作了 moment.js 包，因為控制台可以制作 output

但從上圖我無法導入 moment.js

這是我的 html 代碼

這是我的樹目錄。

謝謝你的幫助......對不起我的壞問題......

Answer 1

您應該對 moment.js 使用require ，因此將導入的內容替換為：

const moment = require('moment');

或者，如果您仍想使用import語句，這也應該有效：

import * as moment from 'moment';

已經有關於這個的討論here 。