Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery ES6 modules example usage

jQuery source is now authored using ES6 modules. It's possible to use them directly in the browser without any build process.

To test it locally, first clone the jQuery repository:

git clone git@github.com:jquery/jquery.git

Then, write the following index.html file:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery ES6 modules test page</title>
</head>
<body>
  <div id="message"></div>
  <script type="module">
	  import $ from "./jquery/src/jquery.js";
	  $('#message').text('Hi from jQuery!');
  </script>
</body>
</html>

Afterwards, run a local HTTP server in the current directory:

npx http-server -p 3000

Then open http://localhost:3000 in your web browser and see jQuery did its work.

@ikysylevych

This comment has been minimized.

Copy link

ikysylevych commented Nov 20, 2019

Is the "import" is working in browsers directly now? No compilation or similar stuff?

@marpstar

This comment has been minimized.

Copy link

marpstar commented Nov 20, 2019

@ikysylevych looks like everything except for IE11: https://caniuse.com/#feat=es6-module

@ikysylevych

This comment has been minimized.

Copy link

ikysylevych commented Nov 20, 2019

@marpstar: thanks! awesome! didn't know that.

@mgol

This comment has been minimized.

Copy link
Owner Author

mgol commented Nov 20, 2019

The only thing you need to remember is that browsers require either a full path (e.g. a URL) or a relative path to the file including its extension. This is different to most bundlers which accept both forms.

The jQuery source does use extensions so it works natively.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.