Babel.js using import and export doesn't work
I am trying to use import and export to create modules and it doesn't work.
I added https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js in the index.html header and tried to import the js file and get the error: SyntaxError: import declarations can displayed only at the top level of the module. What could I be doing wrong?
I know I can use require.js, but rather use import and export.
Html
script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script
JS file
import Mymodule from './modules/mymodule';
source to share
Babylon cannot do client side module forwarding, or rather, it is not universally supported by browsers. In fact, if you're not using a plugin, Babel converts import
to require()
.
If I run the following code:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script defer type="text/babel" data-presets="es2015">
import Mymod from './modules/module';
Mymod();
</script>
</head>
I am getting the following error:
Unprepared ReferenceError: require is not defined
From Important documents :
Browser compilation has a rather limited use case, so if you are on a production site you must precompile your server side scripts. For more information, see Build Systems.
Most people opt for a compiled module like Webpack or Rollup .
If you really want to do this client side, use RequireJS with Babel via the plugin , although you may need to use AMD syntax.
Native browser support for ES6 modules is still in its early stages . But as far as I know, there is not yet a pre-installed / plugin for Babel so that it doesn't transform the operators import/export
.
source to share
The scripts that babel-standalone translates do by default in the global scope, so any symbols they define are automatically available to every other module. From this point of view, you don't need import / export operations in your modules.
However, you can try to maintain source files that can be used both with babel-standalone (e.g. for a quick test environment, feature demo, etc.) or with packages like webpack. In this case, you need to save the import and export instructions there.
One way to make it work is to add additional symbols to the global scope that call the import and export code that babel generates to have no effect (instead of throwing an error as it usually does). For example, export instructions are compiled into code that looks like this:
Object.defineProperty (exports, "__esModule", {
value: true
});
exports.default = MyDefaultExportedClass;
This fails if there is no existing object called "export". So give it one: I just give it a copy of the object window
so that whatever was defined is available:
<script>
// this must run before any babel-compiled modules, so should probably
// be the first script in your page
window.exports = window;
import
are transferred to calls require()
. The result (or properties retrieved from it) is assigned to a variable used as an identifier in the import statement. There's a little complication in the default import, which differs depending on whether the result contains a require()
property __esModule
. If it doesn't, things will be easier (but then you won't be able to support both default and named exports in the same module ... if you have to do that, look at babel's code and figure out how to make it work).
So, we need a working version require()
. We can provide one by providing a static translation of the module name to the exported symbols / symbols. For example, on the demo page for a React component, I have the following implementation:
function require (module) {
if (module === "react") return React;
if (module === "react-dom") return ReactDOM;
}
For a module that returns multiple characters, you simply return an object containing characters as properties.
So a type assertion
`import React from "react";`
translates to efficient code:
`React = React;`
which is roughly what you want.
source to share