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
The npm package babel-transform-in-browser receives a total of 21 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.