Javascript 如何编辑网页包导入的变量？_Javascript_Webpack

Javascript 如何编辑网页包导入的变量？

javascript webpack

Javascript 如何编辑网页包导入的变量？,javascript,webpack,Javascript,Webpack,我对使用webpack构建javascript有点陌生，在理解如何编辑导入的变量时遇到了问题模块1.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 // t

我对使用webpack构建javascript有点陌生，在理解如何编辑导入的变量时遇到了问题

模块1.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导入的变量，我遗漏了什么？

错误“未捕获引用错误：$未定义”背后最常见的原因是在加载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>


jQuery-$未定义
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
警惕（“jQuery工作正常。”）；
});      
});
测试jQuery代码

您无法“编辑”从其他模块导出的内容。这是ES模块的功能之一

然而，这里的问题有两个方面：

import

标识符不是变量，而是绑定。不能重新分配或重新定义它们。来自（我自己的）：

静态导入语句用于导入另一个模块导出的只读实时绑定

Webpack对源代码进行优化，以减少输出包的大小。在本例中，它已确定

number\u variable

永远不会更改（请记住，从上面看，ES模块的规则禁止更改），并保留标量值（整数）

这意味着它可以安全地取出标量值并将其内联。之后，

module1.js

只包含一个现在未使用的

number\u变量的导出声明

，因此它可以完全安全地丢弃

module1.js

模块。这称为死代码消除，或

为了演示（2），您可以在下面看到编译后的Webpack包（通过运行

Webpack--entry module2.js

生成）中的功能模块的外观：

请注意，Webpack已经内联了

number\u变量的值作为console.log
的参数，还预先计算了加法计算并内联了结果。因此，在number\u variable=2
赋值的范围内不存在标识符number\u variable

另一件事是，该函数已通过“use strict”启用语句。这使得通过执行类似于number\u variable=2
的操作来意外创建全局变量是非法的，而不是抛出一个引用错误。使用typescript for easethance@harkal-你能总结一下为什么我会发现TS更容易吗？我发现TS很容易，因为它提供了类型检查和linting，使事情变得更容易。此外，VisualStudio代码具有非常好的智能感，这提高了生产率。您的代码将通过类和对象进行组织。js更多的是原始语言，而ts是有组织的和结构化的，这是错误的，因为变量的范围[我认为]你可以在文件中创建另一个变量，并将值复制到它，然后它应该工作良好@harkal。我听说过，但不知道我是否应该/何时使用它。它与我刚刚了解的网页包/节点兼容吗？谢谢你的回答。但我不认为这与JQuery有关。我将更新我的问题，以显示变量在某一行之前是可用的。当然这将有助于回答！有关详细答案，请参见模块2的注释。
function(e, t, r) {
    "use strict";
    r.r(t);
    console.log(1), number_variable = 2
}