javascript - Javascript模块导出意外令牌错误

Question

当我尝试创建模块纯 javascript 并将其导入静态 html 以使用时，我遇到了问题模块导出意外令牌错误。

const Accordion = {
  items: [],
  listeners: [],

  init() {
    const accordions = document.getElementsByClassName('accordion');

    Array.from(accordions).forEach((accordion) => {
      const items = accordion.getElementsByClassName('accordion-item');
      Array.from(items).forEach((item) => {
        const title = item.getElementsByClassName('accordion-title');
        title[0].addEventListener('click', () => {
          item.classList.toggle('open');
        });
        this.listeners.push(title[0]);
        this.items.push(item);
      });
    });
  },

  destroy() {
    this.listeners.forEach((listener) => {
      listener.removeEventListener('click', () => {});
    });
  },
  
};

export default Accordion;

<div class="xs-12">
        <div class="content-title">Accordion</div>
        <div class="accordion">
            <div class="accordion-item">
                <div class="accordion-title">Title 1</div>
                <div class="accordion-details">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-title">Title 2</div>
                <div class="accordion-details">
                    Shankle strip steak pork buffalo biltong ground round rump tongue.
                    Strip steak alcatra turkey pig biltong bresaola. Venison tri-tip andouille,
                    landjaeger pork chop picanha tongue short ribs sirloin salami bacon bresaola.
                    Spare ribs burgdoggen pork loin, prosciutto cow sirloin venison pancetta.
                    Biltong drumstick jowl cow doner boudin.
                    Jerky shoulder buffalo pork kielbasa bresaola shank spare ribs pork chop.
                    Jerky pig salami buffalo pork chop fatback bacon tenderloin t-bone
                    pastrami burgdoggen shoulder pork loin ham hock.
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-title">Title 3</div>
                <div class="accordion-details">
                    Spare ribs bacon shank sirloin. Chicken ribeye pork,
                    tri-tip boudin short ribs bresaola prosciutto pastrami brisket pancetta.
                    Ham fatback strip steak chicken prosciutto hamburger salami jowl sausage
                    tongue tenderloin biltong. Sirloin bresaola corned beef flank.
                    Doner ribeye jowl meatloaf, andouille pork loin picanha meatball cupim
                    swine fatback flank filet mignon. Beef ribs pancetta t-bone,
                    tail tri-tip filet mignon jowl kielbasa meatball frankfurter boudin strip steak.
                </div>
            </div>
        </div>
    </div>

<script>
(function() {
    console.log('jump into loading global js files');

    requirejs(["../js/accordion"]);
 
 })();
</script>

这是代码：JS Fiddle

但它得到了错误的意外令牌导出模块。有人可以帮我看看吗？

编辑：添加代码以导入模块。

提前致谢，

标签： javascriptmodulerequirejsexport

Answer 1

在你的小提琴上按 F12 并检查错误来自哪里：

(index):61 Uncaught SyntaxError: Unexpected token export

让我们检查一下索引第 61 行的内容：

export default Accordion;

现在，为什么这会是一个问题？好吧，因为原生javascript 模块必须放置在标记为type="module". 您正在使用 requireJs，它似乎是通过简单地将文件中的代码放在“window.onload”中来导入您的 javascript 文件，这会导致以下代码：

<script type="text/javascript">//<![CDATA[

    window.onload=function(){

const Accordion = {
  items: [],
  listeners: [],

  init() {
    const accordions = document.getElementsByClassName('accordion');

    Array.from(accordions).forEach((accordion) => {
      const items = accordion.getElementsByClassName('accordion-item');
      Array.from(items).forEach((item) => {
        const title = item.getElementsByClassName('accordion-title');
        title[0].addEventListener('click', () => {
          item.classList.toggle('open');
        });
        this.listeners.push(title[0]);
        this.items.push(item);
      });
    });
  },

  destroy() {
    this.listeners.forEach((listener) => {
      listener.removeEventListener('click', () => {});
    });
  },
};

export default Accordion;


    }

  //]]></script>

所以有export一个函数内部......这是无效的语法。删除它，代码将运行良好。

如果要使用本机 javascript 模块，请使用import语法来导入您的模块。更多信息。