时间戳

首页 > 解决方案 > 无法从脚本标签 HTML 中的 webpack bundle.js 导入模块

javascript - 无法从脚本标签 HTML 中的 webpack bundle.js 导入模块

问题描述

我使用 webpack 将 bundler 制作成我的 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 包，因为控制台可以输出

在此处输入图像描述

但从上图我无法导入 moment.js

这是我的 html 代码

在此处输入图像描述 这是我的树目录。

这是我的树字典

谢谢你的帮助......对不起我的坏问题......

标签： javascriptwebpack

解决方案

您应该使用requirefor moment.js，因此将导入的内容替换为：

const moment = require('moment');

或者，如果您仍想使用该import语句，这也应该有效：

import * as moment from 'moment';

已经有关于这个的讨论here。

推荐阅读