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

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

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

预先感谢

Answer 1

在小提琴上按F12键，然后检查错误的出处：

(index):61 Uncaught SyntaxError: Unexpected token export

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

export default Accordion;

现在，为什么那会是个问题？好吧，因为必须将 native 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语法导入模块。 More info。

JavaScript模块导出意外令牌错误

1 个答案: