Javascript import reported an error

beginners, want to know where the error is, all the materials found are introduced
the following is my streamlined code. The error prompt is
error prompt on the main.js import line:
SyntaxError: Unexpected token"{". Import call expects exactly one argument

< H2 > index.html < / H2 >
<!DOCTYPE html>
<html>

<head>
    <title>LearnJavscript</title>
    <meta charset="utf-8">
    <style type = "text/css">
        body{
            background: -sharpFFFFFF;
            padding: 0px;
            margin: 0px;
            display: flex;
            /* flex-direction: column-reverse; */
            justify-content: center;
        }
 
    </style>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>
< H2 > main.js < / H2 >
import {hello} from "./lib.js";

hello();
< H2 > lib.js < / H2 >
export function hello() {
    console.log("hello");
}
Mar.14,2021

when can browsers directly use import ?
browser JS does not support modular systems. If necessary, you need to use requirejs or seajs or webpack to handle


<script src="main.js"></script>

= >

<script type="module" src="main.js"></script>

browsers that currently support ES6 Module:

  • Safari 10.1
  • Chrome 61
  • Firefox 54 requires setting dom.moduleScripts.enabled
  • Edge 16

methods of using Module in browsers:

<script type="module" src="./main.js"></script>
// 
<script type="module">
  import './main.js';
</script>

Specification to pay attention to:

  1. Note the referenced path. Main.js, does not support / main.js,. / main.js,.. / main.js, * * / main.js
  2. backward compatibility using the nomodule attribute
  3. Modules defaults to using Defer, which is slower than Synchronize, but before explicit Defer requests
  4. both referenced or inline Modules supports Async
  5. reference the same Modules, multiple times and execute it only once
  6. usually requires CORS, that is, Access-Control-Allow-Origin: *
  7. send request does not include certificate by default
  8. Modules needs to set available MIME types, otherwise
  9. will not be executed

reference:
https://jakearchibald.com/201.


does not support import syntax. You can use babel to es5

.
Menu