Menu
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?
528
You can use babel-standalone to transpile ES6 to ES5 in a browser environment. You just need to load the “babel-standalone” in your script as highlighted below and write the script you want to transpile, in script tag with type “text/babel” or “text/jsx”. Babel will automatically compile and execute the script.
Absolutely can and do use ES6 W/O babel. All major browsers support the vast majority of features natively (see CanIUse.com), in fact, the only major feature not supported is the import/export of modules. For these, you still have to manually import your modules in the correct order using script tags in the HTML.
Simply add a "scripts" field to your package. json and put the babel command inside there as build . This will run Babel the same way as before and the output will be present in lib directory, only now we are using a local copy. Alternatively, you can reference the babel cli inside of node_modules .
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.
95
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
