javascript - 将 Javascript/Jquery 文件逐步重构为 ES6 模块

Question

我正在使用 es6 模块/webpack 将一个非常大的 javascript 文件重构为多个文件。首先，我将单个函数从 GiantFile.js 移至 singleFunction.js，然后将这个新函数文件导入到 index.js，这是 webpack 创建 bundle.js 的入口点，然后将其包含在我的 template.html 文件作为脚本标记。在我的模板文件中，我还包含 GiantFile.js 作为脚本标记，它调用 singleFunction.js 中的函数。

这只是以正确的顺序导入脚本的情况，还是我对 GiantFile.js 如何访问新创建的模块的理解错误。

目前，在控制台中，当我输入 singleFunction() 时，我收到“未定义”错误消息，因此最好在进一步调试之前检查我对如何使用模块的理解是否正确。如果有人能给我指出一些关于重构前端 javascript 的好资源和最佳实践，我也会非常感激。非常感谢。

在 singleFunction.js 中

`export default function singleFunction() {...}`

在index.js

import singleFunction from './components/singleFunction'

在 template.html 中

<script src="/frontendHotness/components/singleFunction.js"></script>
<script src="/unstructuredMess/js/giantFile.js"></script>

Answer 1

你的 giantFile.js 的 webpack 编译版本仍然应该是您的应用程序的入口点，并且是使用 <script> 嵌入到 HTML 文件中的唯一文件。标签。

在重构过程中，您应该逐渐将封装良好的功能部分移至单独的文件或模块中。那些模块export由依赖模块使用的功能。

您的父模块，在本例中为 giantFile.js现在可以import它所依赖的不同模块。这些依赖关系将由 webpack 解决，它将您的父模块及其所有依赖关系移动到一个 JavaScript 文件中，您可以从 HTML 页面加载该文件。

请注意，此依赖关系树可以是任意深度 - 您的子模块本身可以依赖于其他模块。然而，您应该确保您的模块封装了完成一项特定工作的功能，同时与其他模块松散耦合。还要避免循环依赖。