babel 编译vue_如何对代码进行未来验证：使用Babel polyfills编译JavaScript VS

babel 编译vue

A compiler like Babel will almost certainly be a foundational tool in building JavaScript applications going forward.

像Babel这样的编译器几乎肯定会成为构建JavaScript应用程序的基础工具。

A fundamental part of Babel is understanding the difference between compiling your code and polyfilling it. In most cases, doing one without the other will only get your code part of the way there. In this post, we’ll break down the differences between the two so you can confidently future-proof your code.

Babel的一个基本部分是了解编译代码和对其进行填充之间的区别。 在大多数情况下，一无所有只会使您的代码成为其中的一部分。 在本文中，我们将分解两者之间的差异，以便您可以放心地对代码进行过时的验证。

I’ve also recorded a 7-minute video version of this article:

我还记录了这篇文章的7分钟视频版本：

JavaScript is a living language that’s constantly progressing. As a developer, this is great because we’re constantly learning and our tools are constantly improving. The downside of this is that it typically takes browsers a few years to catch up.

JavaScript是一种不断发展的生动语言。 作为开发人员，这很棒，因为我们不断学习并且我们的工具也在不断改进。 缺点是浏览器通常需要几年的时间才能赶上。

Whenever a new language proposal is created, it needs to go through five different stages before it’s added to the official language specification. Then, it actually needs to be implemented into every browser you think your users will use.

每当创建新的语言建议时，在将其添加到官方语言规范之前，都需要经历五个不同的阶段。 然后，实际上需要在您认为用户将使用的每个浏览器中实现它。

Because of this delay, if you ever want to use the newest JavaScript features, you need to either wait for the latest browsers to implement them (and then hope your users don’t use older browsers) or you need to use a tool like Babel to compile your new modern code back to code that older browsers can understand.

由于这种延迟，如果您想使用最新JavaScript功能，则需要等待最新的浏览器实现它们(然后希望您的用户不要使用旧的浏览器)，或者您需要使用Babel之类的工具将新的现代代码编译回旧浏览器可以理解的代码。

When it’s framed like that, it’s almost certain that a compiler like Babel will always be a fundamental part of building JavaScript applications, assuming the language continues to progress. Again, the purpose of Babel is to take your code which uses new features that browsers may not support yet, and transform it into code that any browser you care about can understand.

如此构建时，假设语言不断发展，几乎可以肯定的是，像Babel这样的编译器将永远是构建JavaScript应用程序的基础部分。 同样，Babel的目的是获取使用浏览器尚不支持的新功能的代码，并将其转换为您关心的任何浏览器都可以理解的代码。

So for example, code that looks like this:

因此，例如，如下所示的代码：

const getProfile = username => {  return fetch(`https://api.github.com/users/${username}`)    .then((response) => response.json())    .then(({ data }) => ({      name: data.name,      location: data.location,      company: data.company,      blog: data.blog.includes('https') ? data.blog : null    }))    .catch((e) => console.warn(e))}

… would get compiled into code that looks like this:

…将被编译成如下代码：

var getProfile = function getProfile(username) {  return fetch('https://api.github.com/users/' + username).then(function (response) {    return response.json();  }).then(function (_ref) {    var data = _ref.data;    return {      name: data.name,      location: data.location,      company: data.company,      blog: data.blog.includes('https') ? data.blog : null    };  }).catch(function (e) {    return console.warn(e);  });};

You’ll notice that most of the ES6 code like the arrow functions and template string have been compiled into regular old ES5 JavaScript. There are, however, two features that didn’t get compiled: fetch and includes. The whole goal of Babel is to take our “next generation” code (as the Babel website says) and make it work in all the browsers we care about.

您会注意到，大多数ES6代码(例如箭头功能和模板字符串)已被编译为常规的旧ES5 JavaScript。 但是，有两个未编译的功能： fetch和includes 。 Babel的总体目标是采用我们的“下一代”代码(如Babel网站所说)，并使它在我们关心的所有浏览器中运行。

You would think that includes and fetch would get compiled into something native like indexOf and XMLHttpRequest, but that’s not the case. So now the question becomes, why didn’t fetch or includes get compiled? fetch isn’t actually part of ES6 so that one at least makes a little bit of sense assuming we’re only having Babel compile our ES6 code. includes, however, is part of ES6 but still didn’t get compiled. What this tells us is that compiling only gets our code part of the way there. There’s still another step, that if we’re using certain new features, we need to take - polyfilling.

您可能会认为includes和fetch会被编译为诸如indexOf和XMLHttpRequest类的本地对象，但事实并非如此。 所以现在的问题变成了，为什么不fetch或includes被编译？ fetch实际上并不是ES6的一部分，因此假设我们仅让Babel编译我们的ES6代码，那么至少有一点意义。 但是includes是ES6的一部分，但仍未编译。 这告诉我们的是，编译只会使我们的代码成为其中的一部分。 还有另外一步，如果我们使用某些新功能，则需要采取-polyfilling。

What’s the difference between compiling and polyfilling? When Babel compiles your code, what it’s doing is it’s taking your syntax and running it through various syntax transforms in order to get browser compatible syntax. What it’s not doing is adding any new properties that you may need to the browser’s global namespace or any JavaScript primitive.

编译和polyfill有什么区别？ 当Babel编译您的代码时，它的作用是采用您的语法并通过各种语法转换来运行它，以便获得与浏览器兼容的语法。 它没有做的是在浏览器的全局名称空间或任何JavaScript原语中添加您可能需要的任何新属性。

One way you can think about it is that when you compile your code, you’re transforming it. When you add a polyfill, you’re adding new functionality to the browser.

您可以考虑的一种方法是，在编译代码时，您正在对其进行转换。 添加polyfill时，就是在向浏览器添加新功能。

If this is still fuzzy, here are a list of new features. Try to figure out if they are compiled or if they need to be polyfilled:

如果仍然很模糊，这里是新功能列表。 尝试找出它们是否已编译或是否需要填充：

Arrow Functions Classes Promises Destructuring Fetch String.includes

Arrow functions: Babel can transform arrow functions into regular functions, so, they can be compiled.

箭头函数 ：Babel可以将箭头函数转换为常规函数，因此可以对其进行编译。

Classes: Like Arrow functions, Class can be transformed into functions with prototypes, so they can be compiled as well.

类 ：与Arrow函数一样，可以将Class转换为带有原型的函数，因此也可以对其进行编译。

Promises: There’s nothing Babel can do to transform promises into native syntax that browsers understand, and more important, compiling won’t add new properties, like Promise, to the global namespace, so Promises need to be polyfilled.

Promises ：Babel无法做任何事情来将Promise转换为浏览器可以理解的本机语法，更重要的是，编译不会在全局名称空间中添加Promise类的新属性，因此Promises需要进行多重填充。

Destructuring: Babel can transform every destructured object into normal variables using dot notation. So, compiled.

解构 ：巴贝尔可以在每次解构对象转换为使用点符号正常的变量。 因此，编译。

Fetch: fetch needs to be polyfilled because by the definition mentioned earlier, when you compile code you’re not adding any new global or primitive properties that you may need. fetch would be a new property on the global namespace, therefore, it needs to be polyfilled.

取 ： fetch需要被polyfilled因为定义前面所提到的，当您编译代码你不添加任何新的全球或基本属性，您可能需要。 fetch将是全局名称空间上的新属性，因此，需要对其进行多填充。

String.includes: This one is tricky because it doesn’t follow our typical routine. One could argue that includes should be transformed to use indexOf, however, again, compiling doesn’t add new properties to any primitives, so it needs to be polyfilled.

String.includes ：这很棘手，因为它没有遵循我们的典型例程。 有人可能会认为includes应该转换为使用indexOf ，但是，再次，编译不会向任何基元添加新属性，因此需要对其进行多填充。

Here’s a pretty extensive list from the Babel website as to what features are compiled and what features need to be polyfilled.

这是Babel网站上相当详尽的清单，涉及哪些功能已编译以及哪些功能需要进行填充。

需要编译的功能 (Features that need to be compiled)

Arrow functionsAsync functionsAsync generator functionsBlock scopingBlock scoped functionsClassesClass propertiesComputed property namesConstantsDecoratorsDefault parametersDestructuringDo expressionsExponentiation operatorFor-ofFunction bindGeneratorsModulesModule export extensionsNew literalsObject rest/spreadProperty method assignmentProperty name shorthandRest parametersSpreadSticky regexTemplate literalsTrailing function commasType annotationsUnicode regex

需要填充的功能 (Features that need to be polyfilled)

ArrayBufferArray.fromArray.ofArray#copyWithinArray#fillArray#findArray#findIndexFunction#nameMapMath.acoshMath.hypotMath.imulNumber.isNaNNumber.isIntegerObject.assignObject.getOwnPropertyDescriptorsObject.isObject.entriesObject.valuesObject.setPrototypeOfPromiseReflectRegExp#flagsSetString#codePointAtString#endsWithString.fromCodePointString#includesString.rawString#repeatString#startsWithString#padStartString#padEndSymbolWeakMapWeakSet

Because adding new features to your project isn’t done very often, instead of trying to memorize what’s compiled and what’s polyfilled, I think it’s important to understand the general rules behind the two concepts, then if you need to know if you should include a polyfill for a specific feature, check Babel’s website.

因为不经常在项目中添加新功能，而不是试图记住已编译的内容和已填充的内容，所以我认为了解这两个概念背后的一般规则很重要，那么如果您需要知道是否应包括有关特定功能的polyfill，请访问Babel网站 。

Thanks for reading! I originally published this on tylermcginnis.com as part of our “Modern JavaScript” course.

谢谢阅读！ 我最初将此内容发布在tylermcginnis.com上，作为“ 现代JavaScript ”课程的一部分。

You can follow me on Twitter at @tylermcginnis.

您可以通过Twitter @tylermcginnis关注我。

翻译自: https://www.freecodecamp.org/news/compiling-vs-polyfills-with-babel-c44279dc7a10/

babel 编译vue