Как установить Babel и использовать ES6 локально в браузере?

Итак, я следую учебнику, чтобы узнать ES2015 здесь:

http://k33g.github.io/2015/05/02/ES6.html

Но я не нашел этот файл на основе этого учебника:

node_modules/babel-core/browser.js

Где я могу получить browser.js? Потому что после выполнения:

npm install babel-core

есть 2 browser.js в node_modules\babel-core

1 node_modules\babel-core\lib\api\register\browser.js
2 node_modules\babel-core\lib\api\browser.js

Кого я должен копировать?

Ответы

Ответ 1

Так как babel 6.2.0 browser.js был удален.

Следуя Babel documentation, у вас есть два варианта:

1. Используйте babel-standalone:

Это автономная сборка Babel для использования в средах Node.js, включая браузеры. Это замена babel-browser и используется в официальном Babel repl

2. Свяжите свой собственный файл:

Используйте пакет, такой как browserify/webpack, и требуйте непосредственно модуль babel-core npm и убедитесь, что правильно настроили браузер или webpack, чтобы избежать ошибок из-за чистых зависимостей node и т.д.

Пример конфигурации с помощью webpack (я оставил только один конкретный):

{
    ...
    module: {
      loaders: [
        ...
        {
          loader: 'json-loader',
          test: /\.json$/
        }
      ]
    },
    node: {
      fs: 'empty',
      module: 'empty',
      net: 'empty'
    }
}

Затем в вашем коде:

import {transform} from 'babel-core';
import es2015 from 'babel-preset-es2015';
import transformRuntime from 'babel-plugin-transform-runtime';

...
transform(
        /* your ES6 code */,
        {
          presets: [es2015],
          plugins: [transformRuntime]
        }
      )
...

Обратите внимание, что плагины и пресеты должны быть необходимы из кода и не могут быть переданы как строка.

Ответ 2

Трансляция в браузере была удалена из Babel 6, однако Daniel15 создал автономную сборку для использования в "не-w630 > .js средах, включая браузеры" здесь:

https://github.com/Daniel15/babel-standalone

Все, что вам нужно сделать, это добавить эту ссылку на свою страницу: <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

И затем убедитесь, что вы используете атрибут script type="text/babel" в своих ссылках на другие файлы script.

Ответ 3

Пример async/await с использованием независимого бабеля!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Standalone Async/Await Example</h1>
<!-- Load Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<script type="text/babel" data-presets="es2017, stage-3" data-plugins="syntax-async-functions">
/* Output of Babel object */
console.log('Babel =', Babel);

var users = { '123' : { name : 'Joe Montana'} };
process();
async function process()
{
	var id = await getId();	
	console.log("User ID: "+id);
	
	var name = await getUserName(id);	
	console.log("User Name: "+name);
}
function getId()
{
	return new Promise((resolve, reject) => {
		setTimeout(() => { console.log('calling'); resolve("123"); }, 2000);
	});
}
function getUserName(id)
{
	return new Promise((resolve, reject) => {
		setTimeout(() => { console.log('requesting user name with id: '+id); resolve(users[id].name); }, 3000);
	});
}
</script>
</body>
</html>

Ответ 4

Вам нужно использовать browser.js из babel-browser пакета: https://babeljs.io/docs/usage/browser/

И лучше всего использовать компиляцию на стороне сервера.

Ответ 5

попробуй это

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script type="text/babel" data-presets="es2015,stage-2">
    const res = await axios.get('https://api.hnpwa.com/v0/news/1.json')
    console.log(res)
</script>