Babel and Browserify / Webpack confusion

本文关键字：Webpack confusion Browserify and Babel 更新时间：2023-09-26

快速提问。我对ES2015(ES6)有点困惑。

假设我使用Babel来编译ES6 Javascript以兼容当前浏览器的ES5。

import/export函数在ES6中已经可以通过Babel使用了。那么为什么我需要像Browserify或Webpack这样的东西，如果我只是简单地使用它们来捆绑我的模块，当ES6可以为我做的时候?

无论我走到哪里，我都看到人们将Babel与Browserify或Webpack结合使用。虽然我知道Webpack之类的东西可以用于更多，但我想知道是否也可以使用ES6语法来捆绑文件。

我可能在这里完全错了，我可能已经迷失在2016年的Javascript丛林，所以我希望有人可以为我澄清这一点。

编辑

我假设原生ES6导入/导出功能根本不捆绑文件是对的吗?从我读到目前为止，我认为你仍然需要包括所有单独的Javascript文件，但你只是通过使用本地导入功能导入模块到彼此的命名空间?

是的，使用babel将ES6的导入文件转换为ES5就可以了。

然而，使用webpack的一个优点是创建一个静态文件，以便在生产环境中提供服务。

Pre-ES6没有原生模块系统，因此有多个系统是在用户代码中构建的(例如CommonJS/Node模块和AMD)。这些都是Babel将ES6模块语法转换成的(是的，你是正确的，ES6模块语法无论如何都没有原生捆绑故事)。浏览器不知道这些用户域api。Node通过包装一个"模块"来实现它的模块系统。在注入require()等的函数中。在浏览器中，require()只是一个参考错误。Browserify(或其他捆绑器)使其在浏览器中工作，并将整个依赖关系图捆绑到单个脚本中。如果代码是针对浏览器的，你可能会想要捆绑它。如果是用于Node，则可能不需要。

导入/导出函数

不是函数，是声明。

如果我只是简单地使用这些只是捆绑我的模块，当ES6可以为我做吗?

我想知道是否也可以使用ES6语法捆绑文件。

我假设原生ES6导入/导出功能根本不捆绑文件是对的吗?

是的。没有原生的方式来捆绑ES6模块。你可以把ES6模块的语法编译成Node模块之类的东西，然后把它们捆绑起来。

从我读到目前为止，我认为你仍然需要包括所有单独的Javascript文件，但你只是通过使用本地导入功能导入模块到彼此的命名空间?

重要的是要认识到，虽然语法是标准化的，但许多行为不是。有一个Loader规范正在开发中，用来指定如何定位和加载模块。

参见https://stackoverflow.com/a/33044085/1034448。