Babel和Browserify/Webpack混淆问题

Question

快速问题。我对ES2015（ES6）有点困惑。

假设我使用Babel将ES6 JavaScript编译为符合当前浏览器的ES5。

通过使用Babel，import/export函数已经在ES6中可用。那么如果我只是想使用这些函数来打包我的模块，为什么我需要像Browserify或Webpack这样的工具呢？

无论我去哪里，我都会看到人们将Babel与Browserify或Webpack结合使用。尽管我知道Webpack可以用于更多用途，但我想知道是否也可以使用ES6语法来打包文件。

我可能完全错了，在2016年的Javascript Jungle中迷失了方向，所以希望有人能为我澄清这一点。

编辑

我是否正确地认为本机ES6导入/导出功能只是不打包文件？根据我目前所了解的内容，我认为你仍然需要包含所有单独的JavaScript文件，但你只需使用本机导入功能将模块导入到彼此的命名空间中即可。

- Stephan-v

Answer 1

是的，使用babel将您的ES6导入转换为ES5将起作用。

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

- ShaneDaugherty

---

那么原生的ES6导入导出功能是如何工作的呢？据我理解，它类似于打包程序，将一个模块导入到JavaScript文件中，使我能够访问导出的值。由于其他答案已被删除，现在我感到非常困惑。 - Stephan-v

Answer 2

在ES6之前没有原生的模块系统，所以有多个系统构建在用户代码中（例如CommonJS/Node模块和AMD）。这就是Babel将ES6模块语法转换为这些系统的方式（是的，你正确，ES6模块语法本身并没有原生的打包方式）。浏览器对这些用户API一无所知。Node通过在函数中包装“module”来实现其模块系统，该函数注入require()等。在浏览器中，require()只会产生引用错误。Browserify（或其他bundler）使其在浏览器中工作，并将整个依赖关系图捆绑到单个脚本中。因此，如果代码是针对浏览器的，则可能需要进行捆绑。如果是针对Node，则可能不需要。

导入/导出功能

不是功能，而是声明。

如果我只是使用它们来捆绑我的模块，那么为什么不直接使用ES6呢？

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

我是否正确地认为原生的ES6导入/导出功能只是不会捆绑文件？

是的。没有原生的方法来捆绑ES6模块。您可以将ES6模块语法转译为类似于Node模块的内容，然后将其捆绑在一起。

根据我目前所了解的，我认为您仍然需要包含所有单独的JavaScript文件，但只需使用本地导入功能将模块导入到彼此的命名空间中即可。

重要的是要意识到，虽然语法是标准化的，但很多行为并不是。正在制定一个加载器规范，以指定实际上如何定位和加载模块。

另请参见https://dev59.com/n1wY5IYBdhLWcg3wEEV2#33044085。

- JMM