Скажем, вы пришли из фона, связанного с фреймворком JavaScript, например. Angular, Vue или React и вы хотите поработать или добавить какую-либо функцию в свое устаревшее веб-приложение, например ваш статический HTML-сайт для маркетинговых целей, поэтому я почти уверен, что вы не использовали много синтаксиса, связанного с ES5 или ECMAScript 2009.

Все эти фреймворки не поддерживают кроссбраузерную совместимость для новых версий JavaScript, поэтому в любом случае потребуется какая-то система сборки, которая может быть вашим webpack, npm или gulp и т. Д., Чтобы добавить babel или polyfills, как вы можете Не пишу React без JSX, лол.

Что мистер J (jQuery) может для нас сделать?

Не так давно jQuery была доминирующей библиотекой в ​​интерфейсной веб-разработке. Индустрия в значительной степени перешла от jQuery к новым проектам, но все еще многие люди продолжают поддерживать проекты jQuery.

Но даже если вы используете jQuery с синтаксисом, связанным с ES6, браузер этого не поймет. Вы добавите в него какую-нибудь систему сборки? Это добавляет ненужные жиры в ваше устаревшее веб-приложение.

Представляем Babel Standalone и почему?

Это правда, что использование Babel через Webpack, Browserify или Gulp должно быть достаточным для большинства случаев использования. Однако есть несколько допустимых вариантов использования @ babel / standalone.

  • Приложения, которые напрямую встраивают движок JavaScript, например V8, и хотят использовать Babel для компиляции
  • Приложения, которые хотят использовать JavaScript в качестве языка сценариев для расширения самого приложения, включая все полезности, которые предоставляет ES2015.
  • Самое главное, интеграция Babel в среду, отличную от Node.js.

Использование и установка

Используйте его через UNPKG: https://unpkg.com/@babel/standalone/babel.min.js. Это простой способ встроить его на веб-страницу без дополнительных настроек.

<div id="output"></div> 
<!-- Load Babel --> 
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
<!-- Your custom script here --> 
<script type="text/babel"> 
const getMessage = () => "Hello World"; 
document.getElementById('output').innerHTML = getMessage(); 
</script>
<!-- Your script from path -->
<script type="text/babel" src="/SOME_PATH.js"></script>

Для получения дополнительной информации об этом плагине используйте ссылку.

Но есть еще одна проблема!

Babel может перенести синтаксис с ES6 на ESW независимо! но по-прежнему будут отсутствовать методы ES2015 + (например, Promise, Map, _3 _...), для этого мы используем Polyfills.
Итак, чтобы заставить полностью рабочую среду ES2015 + работать на клиенте, отличном от ES2015 +, простой транспиляции кода иногда недостаточно.

Наконец, мы также добавляем еще один дополнительный фрагмент CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.7.0/polyfill.js"></script>

Это сработает в части преобразования, добавив к вашему коду javascript ES5 для имитации функций es2015 + (например, Object.assign).

Этого хватит для ваших веб-проектов, если вы хотите работать с ES6 +

Компромиссы

  • Дополнительные загрузки, то есть ~ 55 КБ для Polyfill и ~ 278 КБ для автономной версии Babel за ~ 140 мс.
  • Вычисление для транспиляции и добавления недостающих методов ES6 (однократно).

использованная литература

- Ответ StackOverflow
- Автономный плагин Babel

Большое спасибо за чтение! Комментарии / правки приветствуются!