Javascript проект руля с использованием ключевого слова require вызывает ошибки - PullRequest
Новая
       86

Javascript проект руля с использованием ключевого слова require вызывает ошибки

0 голосов
/ 08 июля 2020

Я делаю проект руля javascript на codecademy. Я наткнулся на ключевое слово require . Я считаю, что необходимо загрузить внешний модуль из файла или CDN. В настоящее время он блокирует мой код. Мой проект работает без линии. Но мне интересно, как заставить его работать с линией или вообще зачем нужна такая линия?

Информация:

Имеет неиспользуемый handlebar.min . js файл в проекте. Использование CDN вместо.

Ожидается:

С const {Handlebars} = require ("../ handlebar.min"); Дважды проверьте, доступен ли файл в репо, и запустите остальную часть сценария js или проверьте CDN. Скомпилируйте Handlerbar HTML и запишите содержимое в section #information section.

Получено:

Без изменений. HTML страница загружается без чего-либо в разделе #introduction. Фон, панель навигации и другие элементы загружаются должным образом.

Попытка:

  1. Запустите document.body.inner HTML = "Hello" перед и после строки problemati c, чтобы подтвердить, что это именно та строка, которая ведет себя неожиданно. Содержимое страниц изменяется на hello в 1 случае и блокируется в другом.

  2. Запуск без критериев требований руля (один раз с CDN и один раз с файлом handlebar.min. js) // const {Handlebars} = require ("../ handlebar.min"); Он загружает мои скомпилированные элементы руля HTML в раздел #introduction моей индексной страницы, как и ожидалось.

  3. Поиск Google и легкий поиск на MDN и W3S, но мало что понял: https://github.com/handlebars-lang/handlebars.js/issues/1174 https://www.w3schools.com/nodejs/ref_modules.asp

индекс. html

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Musicon</title>
    <link href="public/style.css" rel="stylesheet" type="text/css" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
    <script id="templateHB" type="text/x-handlebars-template">
    <h1>{{title}}</h1>
    <p>{{body}}</p>
    <a href="store.html">Shop Now</a>
    </script>
    <script src="public/main.js" defer></script>
  </head>

    <article id="introduction" >
      <section id="information" class="container">
      </section>
    </article>

основной. js

//const { Handlebars } = require("../handlebar.min");

const context = {
  title: 'Welcome to Musicon',
  body: 'Musicon is a budding musical storefront with a mission to share the joy of music. These magnificent auditory tools are designed with musical creators, like you, in mind. Hobbyists, beginners, and experts alike can appreciate the resplendent sounds supplied by each and every instrument we carry. Join us in delivering the euphoric vibrations of melodia to the citizens of the world!',
  instruments: [
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/electronic-keyboard.png',
      name: 'Electronic Keyboard',
      description: 'A piano welcomed to the 21th century. Pianists celebrate the compact form factor and the diversity of synthesized rhythms all in one masterful musical machine.',
      price: '$1,999.00',
      sale: '$1,699.89'
    },
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/electric-guitar.png',
      name: 'Electric Guitar',
      description: 'Join the legends of the \'50s and \'60s when the marriage of guitar and electricity created the most influential instrument of a generation. Note: picks sold separately.',
      price: '$599.99'
    },
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/bass-guitar.png',
      name: 'Bass Guitar',
      description: 'Experience the embodiment of funkadelic frequencies that is the bass guitar. Let the deep low notes of the bass guitar resonate with heartbeats everywhere.',
      price: '$624.99'
    },
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/drum-kit.png',
      name: 'Drum Kit',
      description: 'Ever thought, "one instrument isn\'t enough?" Find an answer in the drum kit. Coordinate a collections of drums and cymbals to dictate the rhythm of musical masterpiece.',
      price: '$649.00',
      sale: '$349.00'
    }
  ]
};

const templateElement = document.getElementById('templateHB');
const templateSource = templateElement.innerHTML;
const template = Handlebars.compile(templateSource);
const compiledHtml = template(context);
document.getElementById('information').innerHTML = compiledHtml;
...