Скажем, вы пришли из фона, связанного с фреймворком 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
Большое спасибо за чтение! Комментарии / правки приветствуются!