CODEWITHSUNDEEP
node.jsbabeljs
flyingduck92
flyingduck92

Reputation: 1654

How to install babel and using ES6 locally on Browser?

So, I am following tutorial to learn ES2015 on here:

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

But, I don't find this file based on that tutorial:

node_modules/babel-core/browser.js

Where can I get browser.js? Because after I execute:

npm install babel-core

there are 2 browser.js in node_modules\babel-core

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

Which one should I copy?

Upvotes: 20

Views: 25302

Answers (5)

Mark Gibaud
Mark Gibaud

Reputation: 2061

In-browser transpiling has been removed from Babel 6, however Daniel15 has created a standalone build for use in "non-Node.js environments including browsers" here:

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

All you need to do is add this reference to your page: <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

And then make sure you're using the script type="text/babel" attribute in your references to other script files.

UPDATE: More info can now be found here: babeljs.io/docs/en/next/babel-standalone.html

Upvotes: 10

junho
junho

Reputation: 3841

try this

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

Upvotes: 1

funcoding
funcoding

Reputation: 801

An example of the async/await using 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>

Upvotes: 10

JBE
JBE

Reputation: 12607

Since babel 6.2.0 browser.js has been removed.

Following Babel documentation, you have two options:

1. Use babel-standalone:

It is a standalone build of Babel for use in non-Node.js environments, including browsers. It is a replacement of babel-browser and is used in the official Babel repl

2. Bundle your own file:

Use a bundler like browserify/webpack and require directly babel-core npm module and make sure to configure correctly browserify or webpack to avoid error due to pure node dependencies and so on.

Example of config using webpack (I left only the one specific):

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

Then in your code:

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]
        }
      )
...

Note that plugins and presets need to be required from the code and can't be passed as string option.

Upvotes: 11

stdob--
stdob--

Reputation: 29167

You need use browser.js from babel-browser package: https://babeljs.io/docs/usage/browser/

And best of all to use a compilation on the server side.

Upvotes: 1

Related Questions