Как получить доступ на запись к переменной из другого модуля webpack

Question

Есть два модуля. Для сборки webpack экспортирую переменную из одного модуля в другой. Значение переменной можно прочитать в другом модуле, однако менять это значение нельзя. Хотелось бы понять, почему так и как с этим бороться?

import {ttt} from './common.js';

console.log('Что я вижу из другого модуля:', ttt);

ttt = 'фффффффф';
console.log('А теперь:', ttt);

let ttt = 'мы должны видеть это в другом модуле';
export {ttt}

Вот что видно в консоли:

Что я вижу из другого модуля: мы должны видеть это в другом модуле TicTacToe.js:4

Uncaught TypeError: setting getter-only property "ttt" TicTacToe.js:6 index.js:525 index.js:528

Answer 1

По крайней мере один рабочий способ я нашел. Не скажу, впрочем, что он кажется удобным. Для каждой переменной требуется создавать и экспортировать функции-геттеры и сеттеры.

let ttt = 'мы должны видеть это в другом модуле';

const getttt = () => ttt;
const setttt = (val) => (ttt = val);

export {getttt, setttt}

import {getttt, setttt} from './common.js';

console.log('Что я вижу из другого модуля:', getttt());

setttt('фффффффф');
console.log('А теперь:', getttt());

В результате содержимое переменной действительно меняется:

Что я вижу из другого модуля: мы должны видеть это в другом модуле TicTacToe.js:4

А теперь: фффффффф TicTacToe.js:7

Answer 2

Менять переменную можно, но, действуя из основного файла JS, ты меняешь не саму переменную, а переменную в импортированном объекте module.exports, потом перед выполнением дальнейших действий с этой переменной нужно просто еще раз присвоить ей значение.

Например, переменная let x = 1, меняем значение из основного файла 'название модуля'.x = 2, теперь console.log(module.exports.x) покажет 2. Далее в модуле делаем x = module.exports.x. готово!

БЛОГ НА HUSL

Как получить доступ на запись к переменной из другого модуля webpack

Ответы (2 шт):