Webpack中导入导出变量无法修改报错，求解决方案

你遇到的错误是ES模块规范导致的，和Babel无关。ES模块中，导入的变量是原模块导出变量的只读引用——你可以读取它的值，但不能直接赋值修改，因为导入绑定只提供了getter，没有setter，所以会抛出"Cannot set property which has only a getter"的错误。

下面是两种可行的解决方法：

方法一：通过对象包装变量，修改对象属性 #

将变量放在一个对象里导出，因为对象是引用类型，导入后可以修改对象的属性：

main.js 修改后： #

function getRandomNum(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 用对象包装变量
export const slideState = {
  randomNum: getRandomNum(firstSlideNumber, lastSlideNumber)
};

const slidePrev = document.querySelector('.slide-prev');
slidePrev.addEventListener('click', getSlidePrev);

function.js 修改后： #

import { slideState } from '../index.js';

export function getSlidePrev() {
  if (slideState.randomNum > 1) {
    // 修改对象的属性，而非直接修改导入的变量
    slideState.randomNum -= 1;
    setBg(slideState.randomNum);
  }
}

方法二：导出修改变量的方法，通过方法修改原变量 #

在原模块中定义修改变量的方法并导出，导入模块调用该方法来修改变量，避免直接操作导入的变量：

main.js 修改后： #

function getRandomNum(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
let randomNum = getRandomNum(firstSlideNumber, lastSlideNumber);

// 导出修改变量的方法
export function decrementRandomNum() {
  if (randomNum > 1) {
    randomNum -= 1;
    setBg(randomNum);
  }
}

const slidePrev = document.querySelector('.slide-prev');
slidePrev.addEventListener('click', decrementRandomNum);

function.js 修改后（可选）： #

// 若仍需导出getSlidePrev，可导入decrementRandomNum并包装：
import { decrementRandomNum } from '../index.js';

export function getSlidePrev() {
  decrementRandomNum();
}

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