导出变量时如何解决“语法错误：导出声明​​只能出现在模块的顶层”？

Question

我是编程新手，目前正在使用 HTML、CSS 和 JavaScript 构建项目。我想将变量从我的一个外部 JavaScript 文件导出到另一个。但是，我在尝试 Mozilla Firefox 时从控制台收到错误消息。错误是：“SyntaxError：导出声明​​只能出现在模块的顶层”。

我尝试在代码的开头、结尾和函数内部（我希望从中导出它）导出。我在网上看过，但我似乎找不到任何答案，只有导入的答案。

function exports() {
    export { cakeChoicePricing, cakeTypeResultPricing };
    export { cupcakeChoicePricing, cupcakeTypeResultPricing };
};

在下面导入：

import { cakeChoicePricing, cakeTypeResultPricing } from './JavaScript.js';
import { cupcakeChoicePricing, cupcakeTypeResultPricing } from './JavaScript.js';

感谢您提供的任何帮助！

更新（这里是我的更多代码）：

let cakeChoicePricing;
let cupcakeChoicePricing;

function dessertChoiceCake() {
        cakeElement.setAttribute('class', 'disabled'); //Set cake button to unclickable
        cakeChoicePricing = 'Cake';
        cupcakeChoicePricing = 'Cake';
}

let exportCake = document.getElementById("cakeReviewButton");
let exportCupcake = document.getElementById("cupcakeReviewButton");

exportCake.addEventListener("click", exports);
exportCupcake.addEventListener("click", exports);

function exports() {
    export { cakeChoicePricing, cakeTypeResultPricing };
    export { cupcakeChoicePricing, cupcakeTypeResultPricing };
};

Answer 1

考虑反转您的控制流。与其尝试导出尚不存在的变量，不如从另一个文件导入一个函数，然后在需要时使用cakeChoicePricing 等参数调用该函数。例如：

import displayPrices from './prices';

const prices = {};

// when you need to, assign to properties of the prices object:

function dessertChoiceCake() {
  cakeElement.setAttribute('class', 'disabled'); //Set cake button to unclickable
  prices.cakeChoicePricing = 'Cake';
  prices.cupcakeChoicePricing = 'Cake';
}

const callDisplayPrices = () => {
  displayPrices(prices);
};

exportCake.addEventListener("click", callDisplayPrices);
exportCupcake.addEventListener("click", callDisplayPrices);

并让displayPrices 函数（另一个文件导出）处理具有价格属性的对象，例如

export default (prices) => {
  console.log('cakeChoicePricing:', prices.cakeChoicePricing);
};

Answer 2

导出时，您必须从要导出的源文件的“范围”执行此操作，而不是从当前的函数（即从exports() 函数内部）进行。

一个简单的解决方法是修改您的 JavaScript.js 模块，以便您想要导出（并导入到另一个模块）的变量在声明时直接导出，在您的 JavaScript.js 模块的顶层：

JavaScript.js

// Start of JavaScript.js file - do not nest exports inside of any function, etc

export const cakeChoicePricing = // Some value or function
export const cakeTypeResultPricing = // Some value or function

export const cupcakeChoicePricing = // ..
export const cupcakeTypeResultPricing = // ..

其他模块

// This can be merged into single import statement

import { 
    cakeChoicePricing, 
    cakeTypeResultPricing, 
    cupcakeChoicePricing, 
    cupcakeTypeResultPricing
} from './JavaScript.js';