为什么我们现在在浏览器中有原生 ESM 支持时仍然需要模块打包器
why do we still need module bundlers when we have native ESM support in browsers now
当浏览器现在支持原生 ESM 时,为什么开发人员仍然需要使用 rollup 和 webpack 等模块打包器
您不需要模块打包器 - 开发人员甚至可以在模块和 Webpack 存在之前编写 JS - 但它们仍然可以使过程更容易。
- 大型应用程序需要大量代码。在结构合理的代码库中,这将意味着许多文件和模块。如果客户端的浏览器必须发出大量请求才能从服务器下载每个单独的模块,这可能需要 一些时间 并且会使应用程序似乎需要很长时间才能启动。如果服务器使用 HTTP/1.1,则并发进行中的请求数有限制。 (HTTP/2没有这个限制,但是很多服务器没有实现)
- 拥有一个转换输入源代码的过程可以实现仅在客户端无法(轻松)完成的简洁转换和预处理器。例如,作为捆绑过程的一部分,您可以选择:
- 缩小生产代码(以节省带宽)
- 使用 Babel 将代码转换为您希望支持的任何 EcmaScript 版本,而无需简化您的源代码或手动完成。
- 将 React 的 JSX 语法转译为普通 JavaScript
- write(整洁、简洁)SASS 转换为普通 CSS
当浏览器现在支持原生 ESM 时,为什么开发人员仍然需要使用 rollup 和 webpack 等模块打包器
您不需要模块打包器 - 开发人员甚至可以在模块和 Webpack 存在之前编写 JS - 但它们仍然可以使过程更容易。
- 大型应用程序需要大量代码。在结构合理的代码库中,这将意味着许多文件和模块。如果客户端的浏览器必须发出大量请求才能从服务器下载每个单独的模块,这可能需要 一些时间 并且会使应用程序似乎需要很长时间才能启动。如果服务器使用 HTTP/1.1,则并发进行中的请求数有限制。 (HTTP/2没有这个限制,但是很多服务器没有实现)
- 拥有一个转换输入源代码的过程可以实现仅在客户端无法(轻松)完成的简洁转换和预处理器。例如,作为捆绑过程的一部分,您可以选择:
- 缩小生产代码(以节省带宽)
- 使用 Babel 将代码转换为您希望支持的任何 EcmaScript 版本,而无需简化您的源代码或手动完成。
- 将 React 的 JSX 语法转译为普通 JavaScript
- write(整洁、简洁)SASS 转换为普通 CSS