浏览器没有从 html 页面加载我的 java-script 文件答案

【问题标题】：Browser not loading my java-script file from html page浏览器没有从 html 页面加载我的 java-script 文件
【发布时间】：2019-03-11 15:46:29
【问题描述】：

我是我们设计的新手，我从 github 下载了一个包含完整源代码的网站，当我打开我的 index.html 时，它没有加载其中的 .js 文件。请帮助我，我只是打开了索引。使用 chrome 和 Firefox 的 html 文件

<!doctype html>
        <html lang="en">
         <head>
          <meta charset="utf-8">
          <base href="/">
         <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

      <title>SHOP</title>
      <meta name="description" content="Polymer Shop Demo">

      <link rel="shortcut icon" sizes="32x32" href="images/shop-icon-32.png">
      <meta name="twitter:card" content="summary">
      <meta name="twitter:site" content="@Polymer">
      <meta property="og:type" content="website">
      <meta property="og:site_name" content="SHOP">
      <meta name="theme-color" content="#fff">
      <link rel="manifest" href="manifest.json">

      <style>

        body {
          margin: 0;
          font-family: 'Roboto', 'Noto', sans-serif;
          font-size: 13px;
          line-height: 1.5;
          min-height: 100vh;
        }

        /* styling for render while resources are loading */
        shop-app[unresolved] {
          display: block;
          min-height: 101vh;
          line-height: 68px;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 0.3em;
          color: #202020;
          padding: 0 16px;
          overflow: visible;
        }

      </style>

    </head>
    <body>

      <shop-app unresolved>SHOP</shop-app>

      <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
      <script type="module" src="src/shop-app.js"></script>

      <script>
        window.performance && performance.mark && performance.mark('index.html');
      </script>

    </body>
    </html>

【问题讨论】：

控制台有错误吗？您能否发布一个可重现的示例？
这是 git github.com/Polymer/shop.git@Edric 的克隆代码
控制台中是否有任何错误？
你的意思是代码？不，我猜

标签： javascript html google-chrome web

【解决方案1】：

您似乎需要webcomponents-loader.js 文件。如果你不是用 node.js 做的（你可以学习它here），你需要自己找到那个文件，或者安装 node.js。

以下说明不会帮助您了解其工作原理。我强烈建议您在按照这些说明操作之前观看上面的视频链接以了解 node.js。

如果您的计算机上有一个包含 HTML 和 JS 文件的文件夹（以及您计算机上的 node.js），您可以在您的计算机上打开一个终端，导航到终端中的该文件夹（cd folder_name 等...），然后运行npm init 或sudo npm init，无论哪个有效。

然后要获取该文件，您需要运行npm i webcomponents.js 来安装webcomponents.js。然后，如果您在代码编辑器中打开包含 HTML 和 JS 文件的文件夹，您应该能够看到一个名为 node_modules 的文件夹。

在该文件夹中，您可以找到webcomponentsjs，在该文件夹下，有webcomponents-loader.js。您可以复制该文件并将其粘贴到主 JavaScript 文件所在的位置。然后把脚本代码改成<script src="src/webcomponents-loader.js"></script>

【讨论】：

【解决方案2】：

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

这部分说你需要安装 node.js & npm 并运行它。我建议您搜索“npm”是什么。

【讨论】：

如何安装 js & npm
从 nodejs.org 安装 Node.js 和 NPM 后，您应该在控制台中运行“npm i”以将所有依赖项安装到 node_modules 文件夹中。
如果您愿意，您也可以在将来使用它来运行您的应用程序后端。
你好，我安装了 Node.js，你能告诉我接下来要做什么吗？
github.com/Polymer/shop#setup这里作者描述了必要的步骤。