Babel和Browserify / Webpack混淆 [英] Babel and Browserify / Webpack confusion
问题描述
快速问题。我对ES2015（ES6）有点困惑。
假设我使用 Babel 将ES6 Javascript编译为适合当前浏览器的ES5。
使用Babel可以在ES6中使用导入/导出功能。那么为什么我需要像 Browserify 或 Webpack 这样的东西，如果我只是简单地使用这些来捆绑我的模块，ES6可以为我做什么？
我去哪里都看到有人使用Babel与Browserify或Webpack结合使用。虽然我知道像Webpack可以使用更多的东西，但我想知道是否也可以使用ES6语法来捆绑文件。
我可能完全错了我可能在2016年的Javascript丛林中迷失了，所以希望有人能为我清楚这一点。
编辑
我可以假定本地ES6导入/导出功能根本不捆绑文件？从目前为止，我认为您仍然需要包含所有单独的JavaScript文件，但您只需使用本地导入功能将模块导入到其他命名空间中即可。
前ES6没有本机模块系统，所以在用户代码中构建了多个系统（例如CommonJS / Node模块和AMD）。那些是Babel将ES6模块语法转换为（是的，你是正确的，ES6模块语法没有本机捆绑的故事）。浏览器不了解这些用户界面API。 Node通过在一个注入 require（）等的函数中包装一个module来实现其模块系统。在浏览器中 require（）只是一个引用错误。 Browserify（或另一个bundler）使其在浏览器中工作，并将整个依赖关系图捆绑到单个脚本中。所以如果代码是针对浏览器，你可能会想捆绑它。如果是Node，您可能不需要。
导入/导出功能
不是函数，声明。
如果我只是简单地使用这些来捆绑我的模块， ES6可以为我做什么？
我想知道是否也可以使用ES6语法来捆绑文件。
我是否认为本地ES6导入/导出功能根本不捆绑文件？
是的。没有本机的方式来捆绑ES6模块。您可以将ES6模块语法转换为Node模块，并捆绑它们。
从目前为止我已经看到，我认为您仍然需要包括所有单独的Javascript文件，但是您只需使用本地导入功能将模块导入到其他命名空间中。
实现重要当语法标准化时，很多行为不是。有一个Loader规范正在开发中，以指定如何实际定位和加载模块。
另请参见https://stackoverflow.com/a/33044085/1034448 。
Quick question. I am a bit confused about ES2015(ES6).
Let's say I use Babel to compile to ES6 Javascript to compliant ES5 for current browsers.
The import/export functions are already available in ES6 by using Babel. So why would I need something like Browserify or Webpack if I were to simply use these just to bundle my modules, when ES6 could do it for me?
Everywhere I go I see people using Babel in combination with Browserify or Webpack. Although I know something like Webpack can be used for more, but I wonder if it is also possible to bundle files using the ES6 syntax.
I might be totally in the wrong here and I might have gotten lost in the Javascript Jungle of 2016, so I hope someone can clarifty this for me.
Edit
Am I right to assume that the native ES6 import / export functionality simply does not bundle files? From what I have read so far I think you still need to include all the separate Javascript files but you simply import modules into each-others namespace by using the native import functionality?
Pre-ES6 has no native module system, so there are multiple systems constructed in userland code (e.g. CommonJS / Node modules and AMD). Those are what Babel converts ES6 module syntax to (and yes, you're correct that ES6 module syntax has no native bundling story anyway). Browsers have no knowledge of those userland APIs. Node implements its module system by wrapping a "module" in a function that injects require() etc. In a browser require() would just be a reference error. Browserify (or another bundler) makes it work in the browser, and bundles a whole dependency graph into a single script. So if the code is for the browser you're likely going to want to bundle it. If it's for Node you may not need to.
The import/export functions
Not functions, declarations.
if I were to simply use these just to bundle my modules, when ES6 could do it for me?
I wonder if it is also possible to bundle files using the ES6 syntax.
Am I right to assume that the native ES6 import / export functionality simply does not bundle files?
Yes. There's no native way to bundle ES6 modules. You can transpile ES6 module syntax to something like Node modules and bundle those.
From what I have read so far I think you still need to include all the separate Javascript files but you simply import modules into each-others namespace by using the native import functionality?
It's important to realize that while the syntax is standardized, a lot of the behavior isn't. There's a Loader spec under development to specify how modules will actually be located and loaded.
See also https://stackoverflow.com/a/33044085/1034448.
这篇关于Babel和Browserify / Webpack混淆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
