代码之家  ›  专栏  ›  技术社区  ›  Stav Alfi

ES6导入不起作用

  •  1
  • Stav Alfi  · 技术社区  · 7 年前

    b.js :

    const x = 1;
    export {x};
    

    a.js :

    import {x} from 'b'; // <<-- ERROR
    console.log(x);
    

    index.html :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="a.js"></script>
    </body>
    </html>
    

    错误:

    Uncaught SyntaxError:意外的标记{

    我正在使用webtorm并在Win7中运行Chrome中的项目。


    更新:

    我变了 index.html索引 内容:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="a.js" type="module"></script>
    </body>
    </html>
    

    错误:

    未捕获类型错误:无法解析模块说明符“b”。相对引用必须以“/”、“/”或“../”开头。 enter image description here

    看来 b、 js公司 未加载。

    1 回复  |  直到 7 年前
        1
  •  6
  •   Jaromanda X    7 年前

    要使用ES6模块,必须使用 type="module" -这确保了不理解ES6模块的浏览器不会被它阻塞

    接下来,要导入,必须指定导入文件的路径和完整文件名

    参见代码中的注释

    b、 js公司

    const x = 1;
    export {x};
    

    a、 js公司

    // specify the path and full filename below
    import {x} from './b.js'; // <<-- NO ERROR NOW
    console.log(x);
    

    index.html索引

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!-- add type="module" -->
    <script src="a.js" type="module"></script>
    </body>
    </html>