При использовании и импорте оператора и HTML я не получаю вывод.Почему? - PullRequest
Новая
       13

При использовании и импорте оператора и HTML я не получаю вывод.Почему?

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

Я получаю пустую страницу при использовании импорта.У меня есть простая программа, которая просто для проверки оператора импорта.Я не знаю, почему я не получаю вывод.Вот мой код в приложении JS: 

import TestComponent from "./components/Testcomponentfile"

pageBuild();

function pageBuild(){
    TestComponent();
}

Вот код для компонента: 

export default function TestComponent(){
    console.log("test component js");
    return `    
    <h1>HTML test</h1>
     `

}

И вот индекс. HTML: 

<html lang="en">
<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">
  <script type="text/javascript"></script>
  <title>Document</title>
</head>
<body>
  <div id="demo"></div>
<div>
  <h1> test Html</h1>
</div>

<script src="./JS/app.js"></script>

</body>
</html>

Что мне не хватает ??

Ответы [ 2 ]

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

Используйте type="module" в вашем html при использовании скрипта 

<html lang="en">
<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">
  <script type="text/javascript"></script>
  <title>Document</title>
</head>
<body>
  <div id="demo"></div>
<div>
  <h1> test Html</h1>
</div>

<script type="module" src="./JS/app.js"></script>

</body>
</html>
0 голосов
/ 28 сентября 2019

вызов pageBuild(); после определения функции не решил проблему> Я использую браузер Google Chrome.Это должно работать. 

import TestComponent from "./components/Testcomponentfile"

function pageBuild(){
    TestComponent();
}

pageBuild();

Вот код для компонента: 

export default function TestComponent(){
    console.log("test component js");
    return `    
    <h1>HTML test</h1>
     `

}

обновление до первого ответа

tc.js

export default function TestComponent(){
    console.log("test component js");
    return `
    <h1>HTML test</h1>
     `

}

ap.js

import TestComponent from "./tc.js"

function pageBuild(){
    console.log(TestComponent());
}

pageBuild();

проверено и работает

...