Question

我正在为一个学校项目编码，但他们放弃了这段代码，效果很好。但是他们希望我们使用 imports/exports 将这些 javascript 文件捆绑到一个文件中。看似简单，实则不然。

index.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); 下方进一步访问。所以你所要做的就是导入它：

import routes from './routes'

let pageArgument;
...

不清楚您对 HTML 做了什么，但您要么仅将 index.js 文件作为模块包含在内，要么包含捆绑文件，但肯定不是单独包含所有文件。

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

1 个答案: