Экспорт модуля Javascript неожиданная ошибка токена - PullRequest
Новая
       21

Экспорт модуля Javascript неожиданная ошибка токена

0 голосов
/ 23 сентября 2019

У меня возникла проблема Неожиданная ошибка экспорта модуля при попытке создать модуль на чистом 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

Но произошла ошибка неожиданного модуля экспорта токенов.Может ли кто-нибудь помочь мне взглянуть, пожалуйста?

Редактировать: Добавить код для модуля импорта.

Заранее спасибо,

1 Ответ

0 голосов
/ 23 сентября 2019

Нажмите F12 на скрипке и проверьте, откуда возникла ошибка: 

(index):61 Uncaught SyntaxError: Unexpected token export

Давайте проверим, что находится в строке 61 индекса: 

export default Accordion;

Теперь, почему это будетвопрос?Ну, потому что нативные модули javascript должны быть размещены внутри тегов скрипта, которые помечены как type="module".Вы используете requireJs, который, кажется, импортирует ваш файл javascript, просто поместив код из вашего файла в «window.onload», что приводит к следующему коду: 

<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 для импорта вашего модуля. Подробнее .

...