使用javascript bundler演练问题

Question

我知道有一些任务管理器/捆绑器就像webpack或npm脚本那样执行任务，比如在需要转换的js文件上运行babel，将它们捆绑在一起，uglify最终产品  等

我来自一个非常短的vanilla js背景，目前我只是简单地按顺序导入我的所有脚本：

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

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

问题1：
如果要将所有内容捆绑到一个index.js文件中，那么这意味着调试起来会更加繁琐，因为我需要浏览一个巨大的index.js单个文件来决定我的断点应该去哪里？你是如何处理的？

问题2：
如果所有内容都捆绑在一个巨大的index.js中，那么使用import是什么意思？我仍然有点不清楚导入如何工作，目前所声明的所有内容都基本上附加到窗口对象（或nodejs的全局）。

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

问题4：
我理解这个过程通常应该是这样的：

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

如果有什么东西说明了我对某些事情的误解，请指出我，因为在这个阶段我不知道我不知道的事情。

非常感谢。

Answer 1

1. 像webpack这样的工具可以生成源映射，甚至可以由浏览器调试器（DevTools）直接使用，也可以由大多数IDE使用，以关联源代码和包代码之间的断点。
2. 捆绑商使用导入来了解捆绑的内容和顺序。此外，浏览器将来可能也会支持导入。
3. Webpack（但它的意见）其他：Rollup，SystemJs ......
4. 甚至可以进行调试，因为你也可以获得uglified代码的源地图。

Answer 2

回答1

在开发过程中，您永远不会在构建上工作。有一些工具，比如webpack-server，它运行一个开发服务器，提供易于调试的控制台消息。

回答2

导入意味着将代码分块并通过多个文件和库构建它

<强> ANSWER3

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

<强> Answer4

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