Как отредактировать импортированную переменную webpack?

ProgramBox

Как отредактировать импортированную переменную webpack?

Post author:admin
Запись опубликована:12 марта, 2023
Post category:Вопросы по программированию

#javascript #webpack

Вопрос:

Я немного новичок в создании javascript с помощью webpack, и у меня возникли проблемы с пониманием того, как редактировать импортированные переменные.

module1.js

 export var number_variable = 1

module2.js

 import {number_variable} from "./module1.js"
console.log(number_variable) // correctly logs variable
number_variable = number_variable   1 // throws error

Выдает:

 Uncaught ReferenceError: number_variable is not defined

Чего мне не хватает в том, как работать с импортированными переменными webpack?

1. для удобства используйте typescript

2. Спасибо @harkal — можете ли вы кратко изложить, почему мне было бы проще найти TS?

3. я нахожу ts простым, потому что он обеспечивает проверку типов и компоновку, что упрощает задачу. кроме того, код Visual Studio имеет очень хороший intellisense, который повышает производительность. ваш код будет более упорядочен с помощью классов и объектов. js — это скорее необработанный язык, в то время как ts организован и структурирован

4. и это ошибка из-за области действия переменной [я думаю], вы можете создать другую переменную в файле и скопировать в нее значение, и тогда оно должно работать

5. Звучит хорошо @harkal. Я слышал об этом, но не знал, должен ли / когда я его использовать. Совместим ли он с webpack / node, о котором я только что узнал?

Ответ №1:

Вы не можете «редактировать» то, что экспортируется из другого модуля. Это одна из особенностей модулей ES.

Проблема здесь, однако, двоякая:

import идентификаторы — это не переменные, это привязки. Вы не можете переназначить или переопределить их. Из статьи MDN о import заявлении (курсив мой):

Оператор static import используется для импорта живых привязок только для чтения, которые экспортируются другим модулем.
Webpack выполняет оптимизацию исходного кода, чтобы уменьшить размер выходных пакетов. В этом случае он определил, что number_variable это никогда не изменится (помните выше, правила модулей ES запрещают его изменять) и содержит скалярное значение (целое число).

Это означает, что он может безопасно извлекать скалярное значение и вставлять его. После этого содержит module1.js только теперь неиспользуемое объявление экспорта for number_variable , поэтому он может безопасно полностью отказаться от module1.js модуля. Это называется устранением мертвого кода или встряхиванием дерева.

Чтобы продемонстрировать (2), вы можете увидеть ниже, что module2.js выглядит как функциональный модуль внутри скомпилированного пакета Webpack (созданный путем запуска webpack --entry module2.js ):

 function(e, t, r) {
    "use strict";
    r.r(t);
    console.log(1), number_variable = 2
}

Обратите внимание, что Webpack вставил значение number_variable в качестве аргумента console.log , а также предварительно рассчитал вычисление сложения и вставил результат этого. Из-за этого number_variable в области назначения не существует идентификатора number_variable = 2 .

Другое дело, что функция имеет включенный строгий режим, с помощью "use strict"; инструкции в верхней части функции. Это делает незаконным случайное создание глобальных переменных, делая что-то точно такое number_variable = 2 , вместо этого вызывая ReferenceError .

Ответ №2:

Наиболее распространенной причиной ошибки «Uncaught ReferenceError: $ is not defined» является выполнение кода jQuery до загрузки файла библиотеки jQuery. Поэтому убедитесь, что вы выполняете код jQuery только после завершения загрузки файла библиотеки jQuery.

Пример :

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery - $ is not defined</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("jQuery is working perfectly.");
    });      
});
</script>
</head>
<body>
    <button type="button">Test jQuery Code</button>
</body>
</html>

1. Спасибо за ваш ответ. Я не думал, что это может быть связано с jQuery. Я обновлю свой вопрос, чтобы показать, что переменная доступна до определенной строки.

2. Уверен, что было бы полезно ответить!

3. пожалуйста, смотрите Примечание к модулю 2