JS：模块导入/导出将不起作用 ES6

Question

我为一个学校项目编码，他们放弃了这段代码，这工作正常。 但是他们希望我们使用import/exports将这些 javascript 文件捆绑到一个文件中。 它看起来很容易，但事实并非如此。

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Basic routing</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <a href="#">Home</a>
    <a href="#pagelist">PageList</a>
    <a href="#pagelist/borderlands">PageList borderlands</a>

    <section id="pageContent">Choisissez un lien</section>

    <script src="js/Home.js"></script>
    <script src="js/PageList.js"></script>
    <script src="js/PageDetail.js"></script>
    <script src="js/routes.js"></script>
    <script src="app.js"></script>

  // then i'll use <script src="./dist/bundle.js"></script>

  </body>
</html>

src/js/Home.js

const Home = (argument = "") => {
 console.log("Page List", argument);
};
export default Home

src/js/PageDetail.js

const PageDetail = (argument) => {
  const preparePage = () => {
    cleanedArgument = argument.replace(/\s+/g, "-");


    const fetchGame = (url, argument) => {
      let finalURL = url + argument;

      fetch(`${finalURL}`)
        .then((response) => response.json())
        .then((response) => {
          let { name, released, description } = response;

          let articleDOM = document.querySelector(".page-detail .article");

          articleDOM.querySelector("h1.title").innerHTML = name;
          articleDOM.querySelector("p.release-date span").innerHTML = released;
          articleDOM.querySelector("p.description").innerHTML = description;
        });
    };

    fetchGame(`https://api.rawg.io/api/games?key=4a7bd6f3d4314002babc4e422c08c2e6& ${cleanedArgument}`);
  };

  const render = () => {
    pageContent.innerHTML = `
      <section class="page-detail">
        <div class="article">
          <h1 class="title"></h1>
          <p class="release-date">Release date : <span></span></p>
          <p class="description"></p>
        </div>
      </section>
    `;

    preparePage();
  };

  render();
};
export default PageDetail

src/js/PageList.js

const PageList = (argument = "") => {
  const preparePage = () => {
    cleanedArgument = argument.replace(/\s+/g, "-");
    let articles = "";

    const fetchList = (url, argument) => {
      let finalURL = url;
      if (argument) {
        finalURL = url + "?search=" + argument;
      }

      fetch(`${finalURL}`)
        .then((response) => response.json())
        .then((response) => {
          response.results.forEach((article) => {
            articles += `
                  <div class="cardGame">
                    <h1>${article.name}</h1>
                    <h2>${article.released}</h2>
                    <a href = "#pagedetail/${article.id}">${article.id}</a>
                  </div>
                `;
          });
          document.querySelector(".page-list .articles").innerHTML = articles;
        });
    };

    fetchList(`https://api.rawg.io/api/games?key=4a7bd6f3d4314002babc4e422c08c2e6& ${cleanedArgument}`);
  };

  const render = () => {
    pageContent.innerHTML = `
      <section class="page-list">
        <div class="articles">...loading</div>
      </section>
    `;

    preparePage();
  };

  render();
};
export default PageList

src/js/routes.js

const routes = {
  "": Home,
  "pagelist": PageList,
  "pagedetail": PageDetail,
};
export default routes

src/js/index.js

import Home from './Home'
Home() // trying to invoke them one by one.. but it's not working 
import PageList from './PageList'
PageList() // 
import PageDetail from './PageDetail'
PageDetail() // 
import routes from './routes'
routes()

let pageArgument;

const setRoute = () => {
  let path = window.location.hash.substring(1).split("/");
  pageArgument = path[1] || "";

  var pageContent = document.getElementById("pageContent");
  routes[path[0]](pageArgument);
  return true;
};

window.addEventListener("hashchange", () => setRoute());
window.addEventListener("DOMContentLoaded", () => setRoute());

现在，如果我从所有文件中取出所有代码并将它们放在一个文件中。 有用。 但我不明白该怎么做以及为什么看起来很容易的事情如此困难。

在一个文件中，它可以工作，但我必须使用导入/导出，所以我不能使用它！

const Home = (argument = "") => {
  console.log("Batman", argument);
};

const PageDetail = (argument) => {
  const preparePage = () => {
    cleanedArgument = argument.replace(/\s+/g, "-");


    const fetchGame = (url, argument) => {
      let finalURL = url + argument;

      fetch(`${finalURL}`)
        .then((response) => response.json())
        .then((response) => {
          let { name, released, description } = response;

          let articleDOM = document.querySelector(".page-detail .article");

          articleDOM.querySelector("h1.title").innerHTML = name;
          articleDOM.querySelector("p.release-date span").innerHTML = released;
          articleDOM.querySelector("p.description").innerHTML = description;
        });
    };

    fetchGame(`https://api.rawg.io/api/games?key=4a7bd6f3d4314002babc4e422c08c2e6& ${cleanedArgument}`);
  };

  const render = () => {
    pageContent.innerHTML = `
      <section class="page-detail">
        <div class="article">
          <h1 class="title"></h1>
          <p class="release-date">Release date : <span></span></p>
          <p class="description"></p>
        </div>
      </section>
    `;

    preparePage();
  };

  render();
};

const PageList = (argument = "") => {
  const preparePage = () => {
    cleanedArgument = argument.replace(/\s+/g, "-");
    let articles = "";

    const fetchList = (url, argument) => {
      let finalURL = url;
      if (argument) {
        finalURL = url + "?search=" + argument;
      }

      fetch(`${finalURL}`)
        .then((response) => response.json())
        .then((response) => {
          response.results.forEach((article) => {
            articles += `
                  <div class="cardGame">
                    <h1>${article.name}</h1>
                    <h2>${article.released}</h2>
                    <a href = "#pagedetail/${article.id}">${article.id}</a>
                  </div>
                `;
          });
          document.querySelector(".page-list .articles").innerHTML = articles;
        });
    };

    fetchList(`https://api.rawg.io/api/games?key=4a7bd6f3d4314002babc4e422c08c2e6& ${cleanedArgument}`);
  };

  const render = () => {
    pageContent.innerHTML = `
      <section class="page-list">
        <div class="articles">...loading</div>
      </section>
    `;

    preparePage();
  };

  render();
};

const routes = {
  "": Home,
  "pagelist": PageList,
  "pagedetail": PageDetail,
};

let pageArgument;

const setRoute = () => {
  let path = window.location.hash.substring(1).split("/");
  pageArgument = path[1] || "";

  var pageContent = document.getElementById("pageContent");
  routes[path[0]](pageArgument);
  return true;
};

window.addEventListener("hashchange", () => setRoute());
window.addEventListener("DOMContentLoaded", () => setRoute());

Answer 1

您的组合文件和您的单个文件显然包含不同的代码：在src/js/index.js您正在调用Home并声称它不起作用。 在单个文件中，您没有调用Home 。 那你为什么叫Home呢？

Home ， PageList和PageDetail不需要在src/js/index.js 。 它们在src/js/routes.js ，所以这就是它们应该被导入的地方：

import Home from './Home'
import PageList from './PageList'
import PageDetail from './PageDetail'

const routes = {
  "": Home,
  "pagelist": PageList,
  "pagedetail": PageDetail,
};
export default routes

routes在src/js/index.js是必需的，但您不需要调用它（并且不能调用，因为它不是一个函数，它是一个对象）。 它可以在routes[path[0]](pageArgument);下面进一步访问routes[path[0]](pageArgument); . 所以你所要做的就是导入它：

import routes from './routes'

let pageArgument;
...

不清楚你对 HTML 做了什么，但你要么只包含index.js文件作为模块，要么包含包文件，但肯定不是单独的所有文件。

JS：模块导入/导出将不起作用 ES6

问题描述

1 个解决方案

解决方案1
1 2021-07-28 21:40:42

JS：模块导入/导出将不起作用 ES6

问题描述

1 个解决方案

解决方案1 1 2021-07-28 21:40:42

解决方案1
1 2021-07-28 21:40:42