babel-transform-in-browser
Advanced tools
Transform ES2015 code in browser on the fly with Babel.js
Transform ES2015 code in browser on the fly with Babel.js.
https://npmcdn.com/babel-transform-in-browser@6.4.6/dist/btib.min.js
Also check sources at 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://npmcdn.com/babel-transform-in-browser@6.4.6/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);
// 6
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).
Check the example below (it's also availbe as "React Prototyping Playground" gist - https://gist.github.com/voronianski/f67f4973687434f474b4):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>React Quick Prototyping</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-transform-in-browser@6.4.6/dist/btib.min.js"></script>
<script type="text/es2015">
// Your playground code goes here, e.g.:
function App ({ title }) {
return (
<div>{title}</div>
);
}
ReactDOM.render(
<App title="Hello World" />,
document.getElementById('root')
);
</script>
</body>
</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.
MIT Licensed
FAQs
Transform ES2015 code in browser on the fly with Babel.js
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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.