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

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

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

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

node_modules/babel-core/browser.js

где я могу получить браузер.Яш? Потому что после того, как я выполню:

npm install babel-core

есть 2 браузера.js in node_modulesbabel-core

1 node_modulesbabel-corelibapiregisterbrowser.js
2 node_modulesbabel-corelibapibrowser.js

какой из них я должен скопировать?

9
babeljs node.js

4 ответов

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

после документация Babel, у вас есть два варианта:

1. Использовать babel-standalone:

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

2. Bundle свой собственный файл:

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

пример конфигурации с использованием 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]
        }
      )
...

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

7

транспилирование в браузере было удалено из Babel 6, однако Daniel15 создал автономную сборку для использования в "не узле".среды 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" атрибут в ваших ссылках на другие файлы скриптов.

6

пример асинхронного / await с использованием babel standalone!

<!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>
5

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

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

1