如何在浏览器中使用已编译的ES6到ES5文件？

Question

I have two modules in ES6:

//mycalss.js
class MyClass {
}
export {MyClass};

//main.js
import {MyClass} from './../src/myclass';

And I am using Laravel-mix to handle the compilation and bundle process.

In the end I end up with a main.js .

I link this file in my html.

<script type="text/javascript" src="main.js"></script>

And try to make a reference to the class MyClass :

<script type="text/javascript">

    var object = new MyClass();

</script>

But a Uncaught ReferenceError: MyClass is not defined is thrown.

So, how do I use a classe compiled from es6 to es5 in my html?

Answer 1

ES6 modules have module scope. This prevents them from leaking variables to global scope. This is exactly what modularity is for.

In order to use items from ES6 modules (the same applies to CommonJS modules or IIFEs that implement module pattern) in global scope, they have to be defined as globals. In the case of client-side script this means that they should be defined as window properties inside bundled application:

window.MyClass = MyClass;

This indicates potential XY problem. A better option is to reconsider the reasons why it should be available in global scope. If there is bundled ES6 application already, it is supposed to run code from inline <script type="text/javascript">...</script> too.

Answer 2

You can use Babel to compile JavaScript from ES6 to ES5 in browser.

Often, you have to use webpack to do that automatically for you and insert the script inside HTML.