使用generate-serial-number模块遇导入导出问题求助

错误原因分析 #

1. require is not defined：浏览器环境不支持Node.js的CommonJS模块语法require()，只能使用原生ES模块的import/export，且需要在HTML的脚本标签中声明type="module"。
2. does not provide an export named 'generate'：generate-serial-number是CommonJS模块，默认导出整个模块对象而非具名导出generate；同时浏览器无法自动解析node_modules包名，需要指定模块文件的完整路径。

解决方案 #

方案一：正确导入第三方模块 #

1. 修改HTML脚本标签：确保引用movies.js时加上type="module"属性，告诉浏览器这是ES模块：

<script type="module" src="./movies.js"></script>

2. 修改movies.js的导入语句：直接指向模块的主文件路径（根据你的项目结构调整），并使用默认导入：

// 替换原来的require语句
import generator from '../node_modules/generate-serial-number/index.js';

// 后续代码保持不变...

方案二：自行实现序列号生成函数（无依赖更稳定） #

由于generate-serial-number的功能简单，直接手写替代函数，彻底避免模块导入问题：

// 替换原require/import，自定义序列号生成函数
const generateSerialNumber = (length) => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let serial = '';
  for (let i = 0; i < length; i++) {
    serial += chars[Math.floor(Math.random() * chars.length)];
  }
  return serial;
};

// 座位号生成函数不变
const seatNumberGenerator = () => {
  const alphabet = "abcdefghijklmnopqrstuvwxyz";
  const randomLetter = alphabet[Math.floor(Math.random() * alphabet.length)];
  return `${Math.floor(Math.random() * 100)}${randomLetter}`;
};

// 场次时间函数（修复未声明的show变量）
const showTimmings = (date, time) => {
  const show = new Date(2023, 11, date, time, 0, 0, 0);
  return {
    showDate: `${show.getDate()}/${show.getMonth() + 1}`,
    showTime: `${show.getHours()}:00`,
  };
};

const Movies = [
  {
    name: "Animal",
    ticketPrice: 300,
    image: "../assets/images/animal-indian-movie-poster.jpg",
    rating: 3.9,
    genre: "Action/Crime",
    time: "3h 22m",
    seatNumber: seatNumberGenerator(),
    show: showTimmings(3, 1),
    ticketNumber: generateSerialNumber(6),
  },
  {
    name: "Fukrey 3",
    ticketPrice: 300,
    rating: 2.9,
    genre: "Comedy/Thriller",
    time: "2h 27m",
    image: "../assets/images/fukrey-3-indian-movie-poster.jpg",
    seatNumber: seatNumberGenerator(),
    show: showTimmings(3, 16),
    ticketNumber: generateSerialNumber(6),
  },
  {
    name: "Tiger 3",
    ticketPrice: 300,
    image: "../assets/images/tiger-3-indian-movie-poster.jpg",
    rating: 3.5,
    genre: "Action/Thriller",
    time: "2h 30m",
    seatNumber: seatNumberGenerator(),
    show: showTimmings(3, 20),
    ticketNumber: generateSerialNumber(6),
  },
  {
    name: "Pathaan",
    ticketPrice: 300,
    image: "../assets/images/pathaan-indian-movie-poster.jpg",
    rating: 3.9,
    genre: "Action/Thriller",
    time: "2h 26m",
    seatNumber: seatNumberGenerator(),
    show: showTimmings(3, 23),
    ticketNumber: generateSerialNumber(6),
  },
  {
    name: "Sam Bahadur",
    ticketPrice: 300,
    rating: 4.6,
    genre: "War/Drama",
    time: "2h 25m",
    image: "../assets/images/sam-bahadur-movie-poster.jpg",
    seatNumber: seatNumberGenerator(),
    show: showTimmings(3, 10),
    ticketNumber: generateSerialNumber(6),
  },
];

export default Movies;

内容的提问来源于stack exchange，提问作者Rakshit Gumber