17

Use ESNext features without bundling tool

 4 years ago
source link: https://github.com/n0ruSh/the-art-of-reading/blob/master/articles/Use ESNext features without bundling tool.md
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Use ESNext features without bundling tool

type = module

All you need is type=module on the script element, and the browser will treat the inline or external script as an ECMAScript module. 

<script type=“module”>
  import {sum} from ‘./utils.js’;
  console.log(sum(2,3));
</script>
// utils.js
export function sum(a, b) {
	return a + b;
}

babel

One of the easiest ways to get babel working is to include a link to the Babel CDN directly in HTML, which will compile any code in script blocks that have a type of text/babel . 

<!doctype html>
<html>
<head>
  <title>Babel</title>
  <script src='https://unpkg.com/[email protected]/babel.min.js'></script>
</head>

<body>
  <script type='text/babel'>
    async function f() {
      const data = await new Promise((resolve) => {
        setTimeout(() => {
          resolve('hello world');
        }, 1000)
      });
      console.log(data);
    }

    f();
  </script>
</body>
</html>

Reference

Notice

  • If you want to follow the latest news/articles for the series of reading notes, Please 「Watch」 to Subscribe.

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK