example.htm 989 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>babel-standalone example</title>
  6. </head>
  7. <body>
  8. Input:
  9. <textarea id="input" style="width: 100%" rows="10">
  10. const getMessage = () => 'Hello World';
  11. const someDiv = <div>{getMessage()}</div>;
  12. </textarea>
  13. Transformed code using Babel <strong id="version"></strong>:
  14. <pre id="output">Loading...</pre>
  15. <script src="../babel.js"></script>
  16. <script>
  17. console.log('Babel =', Babel);
  18. document.getElementById('version').innerHTML = Babel.version;
  19. var inputEl = document.getElementById('input');
  20. var outputEl = document.getElementById('output');
  21. function transform() {
  22. try {
  23. outputEl.innerHTML = Babel.transform(inputEl.value, {
  24. presets: ['es2015', 'react', 'stage-0']
  25. }).code;
  26. } catch (ex) {
  27. outputEl.innerHTML = 'ERROR: ' + ex.message;
  28. }
  29. }
  30. inputEl.addEventListener('keyup', transform, false);
  31. transform();
  32. </script>
  33. </body>
  34. </html>