捆绑 javascript 模块问题

Question

我对 javascript 编程非常陌生。我正在尝试通过汇总捆绑两个模块。我正在尝试将文件 - cars.js - 导入到我的 index.js 文件中。

cars.js 代码

const carsJSON = `[
    {
        "make": "Honda",
        "model": "Accord",
        "year": 1997,
        "price": 2800
    },
    {
        "make": "Toyota",
        "model": "Fortunner",
        "year": 2001,
        "price": 3500
    },
     {
        "make": "Hyundai",
        "model": "i20",
        "year": 2005,
        "price": 3000
    },
    {
        "make": "Maruti Suzuki",
        "model": "WagonR",
        "year": 1995,
        "price": 1200
    }
]`

export const cars = JSON.parse(carsJSON);

这是index.js的代码

import { cars } from 'cars.js';

const message = cars[0].make;

以及创建的bundle.js代码

!function(s){"use strict";s.cars[0].make}(cars_js);
//# sourceMappingURL=bundle.js.map

但是，当我在本地服务器上加载 .html 文件时，我收到此错误 -

index.js:3 Uncaught ReferenceError: cars_js is not defined
    at index.js:3:25

这是创建的package.json

{
  "name": "bundler",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "rollup -c",
    "watch": "rollup -c -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/preset-react": "^7.24.7",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^26.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-replace": "^5.0.7",
    "@rollup/plugin-terser": "^0.4.4",
    "rollup": "^2.79.1",
    "rollup-plugin-terser": "^7.0.2"
  }
}

和 rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'build/bundle.js',
    format: 'iife', // Immediately Invoked Function Expression
    sourcemap: true,
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/preset-react'],
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      preventAssignment: true,
    }),
    terser(),
  ],
};

捆绑是否有任何问题或如何修复错误？

Answer 1

您的

cars.js

文件应该导出默认的汽车对象数组。

export default [
  {
    make: "Honda",
    model: "Accord",
    year: 1997,
    price: 2800,
  },
  {
    make: "Toyota",
    model: "Fortunner",
    year: 2001,
    price: 3500,
  },
  {
    make: "Hyundai",
    model: "i20",
    year: 2005,
    price: 3000,
  },
  {
    make: "Maruti Suzuki",
    model: "WagonR",
    year: 1995,
    price: 1200,
  },
];

你应该导入如下：

import cars from './cars.js'; // Note the relative path

确保

cars.js

是您的

index.js

文件的同级文件。

---

更新

关于本次IIFE：

!function(s){"use strict";s.cars[0].make}(cars_js);

上面加载的

cars_js

是一个数组，因为我将其更改为默认导出。它正在尝试访问范围上的

cars

字段，但它现在是一个数组。

要解决此问题，您可能需要将其更改回命名导出才能正常工作：

export const cars = [
  {
    make: "Honda",
    model: "Accord",
    year: 1997,
    price: 2800,
  },
  {
    make: "Toyota",
    model: "Fortunner",
    year: 2001,
    price: 3500,
  },
  {
    make: "Hyundai",
    model: "i20",
    year: 2005,
    price: 3000,
  },
  {
    make: "Maruti Suzuki",
    model: "WagonR",
    year: 1995,
    price: 1200,
  },
];

或者：

const cars = [
  {
    make: "Honda",
    model: "Accord",
    year: 1997,
    price: 2800,
  },
  {
    make: "Toyota",
    model: "Fortunner",
    year: 2001,
    price: 3500,
  },
  {
    make: "Hyundai",
    model: "i20",
    year: 2005,
    price: 3000,
  },
  {
    make: "Maruti Suzuki",
    model: "WagonR",
    year: 1995,
    price: 1200,
  },
];

export { cars };