babel-transform-in-browser
Advanced tools
Transform ES2015 code in browser on the fly with Babel.js.
https://cdnjs.cloudflare.com/ajax/libs/babel-transform-in-browser/0.1.0/dist/btib.min.js
Or check dist folder.
The answer is quick prototyping.
IMPORTANT NOTE: Please never use this module in real projects and production environments.
Just include the script on the page before or after your ES2015 scripts. Please note that only scripts that have type="text/es2015" attribute will be transpiled, see example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quick ES2015 Prototyping</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-transform-in-browser/0.1.0/dist/btib.min.js"></script>
<script type="text/es2015">
const multiplier = (x) => (y) => x * y;
const double = multiplier(2);
const result = double(3);
console.log(result);
// 9
class Cat {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Lion extends Cat {
speak() {
super.speak();
console.log(this.name + ' roars.');
}
}
let cat = new Cat('Simon');
cat.speak();
// Simon makes a noise.
let lion = new Lion('Sam');
lion.speak();
// Sam makes a noise.
// Sam roars.
</script>
</body>
</html>
This script was created mainly because of the discussion on how hard it is to start hacking on a js project today. Also it is a response to the @Vjeux's challenge (http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html):
- No setup: I'm happy to have to setup something initially (dedicated server, apache, php...) but nothing should be required to create a new project. No npm install, react-native init, creating a github project, yo webapp...
- One file: I want to write a single js file to start with. No package.json, no .babelrc, no Procfile...
- Sharable: I want to be able to share it with a url without any extra step. No git push heroku master or git push gh-pages.
- Keeps working: Once online, it should stay there and keep working 6 months later. No npm start to run it, no special port that's going to conflict with my 10 other prototypes...
- Not generic: I don't care about it being generic, I will use whatever transforms you decided. Happy to write js without semi-colons and using SASS for my CSS if you checked all the boxes above.
- Not prod-ready: This setup doesn't have to be prod-ready, support unit testing or anything that involves it being a real product. This is meant for hacking on stuff. When the project becomes good, I'll spend the time to add all the proper boilerplate.
What will be nice to add is extending transformations with options in script's querystring like:
/path/to/btib.min.js?presets[]=stage-0&plugins[]=transform-runtime
For now it's not added because of bug in babel-standalone module - https://github.com/Daniel15/babel-standalone/issues/4.
MIT Licensed
FAQs
Transform ES2015 code in browser on the fly with Babel.js
The npm package babel-transform-in-browser receives a total of 20 weekly downloads. As such, babel-transform-in-browser popularity was classified as not popular.
We found that babel-transform-in-browser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."