使用 javascript 捆绑器演练问题

Question

我知道有一些任务 managers/bundlers 像 webpack 或 npm 脚本那样在需要转译的 js 文件上执行运行 babel 之类的任务，将它们捆绑在一起，丑化完成品等等

我来自非常短的 vanilla js 背景，目前我只是像这样连续导入我的所有脚本：

<script src"1.js></script>
<script src"2.js></script>
..etc

这当然会产生依赖关系需要有序等问题。然而，使用开发人员工具进行调试非常简单，因为我可以简单地转到源代码，选择我需要的文件并指定断点。

问题一：
如果所有东西都被捆绑到一个 index.js 文件中，这是否意味着调试起来会更加乏味，因为我需要浏览一个巨大的 index.js 单个文件来决定我的断点应该放在哪里？你是怎么处理的？

问题二：
如果所有东西都捆绑在一个巨大的 index.js 中，导入有什么用？我仍然不太清楚 import 的一般工作原理，目前声明的所有内容基本上都附加到 window 对象（或 nodejs 的全局对象）。

问题三：
您会为初学者推荐什么捆绑器？我试图从头开始在我的例程中编写所有任务，如转译 FLOW 和 JSX，而不是使用现成的东西，因为我想很好地理解每个部分的作用。

问题四：
据我了解，该过程通常应如下所示：

A1) JS 转译
A2) CSS 转译（对于像 LESS 这样的语言）
B) 捆绑
C）丑化（我认为这应该只用于生产，否则调试是不可能的）

如果我说的话揭示了我对某事的误解，请为我指出，因为在这个阶段我不知道我不知道什么。

非常感谢。

Answer 1

像 webpack 这样的工具可以生成源映射，浏览器调试器 (DevTools) 甚至可以直接使用它，也可以被大多数 IDE 用来关联源代码和捆绑代码之间的断点。
打包器使用导入来了解打包的内容和顺序。将来浏览器可能会直接支持导入。
Webpack（但自以为是）其他：Rollup、SystemJs...
甚至对于调试也可以进行丑化，因为您也可以拥有丑化代码的源映射。

Answer 2

回答 1

你永远不会在开发的同时进行构建。有几种工具，例如 webpack-server，它运行一个提供易于调试控制台消息的开发服务器。

答案 2

导入是为了分块你的代码并通过多个文件和库构建它

答案3

那里有多个包管理器，但推荐一个是自以为是的。我只能说 Webpack 和 Gulp 是众所周知的

回答4

取决于您如何配置包管理器！

Using a javascript bundler walkthrough questions