Javascript 浏览器未从html页面加载我的java脚本文件_Javascript_Html_Google Chrome_Web

Javascript 浏览器未从html页面加载我的java脚本文件

javascript html google-chrome web

Javascript 浏览器未从html页面加载我的java脚本文件,javascript,html,google-chrome,web,Javascript,Html,Google Chrome,Web,我是我们设计的新手，我从github下载了一个网站，有完整的源代码，当我打开index.html时，里面没有加载.js文件。请帮助我，我只是用chrome和Firefox打开了index.html文件 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <base href="/">

我是我们设计的新手，我从github下载了一个网站，有完整的源代码，当我打开index.html时，里面没有加载.js文件。请帮助我，我只是用chrome和Firefox打开了index.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>


商店
身体{
保证金：0；
字体系列：“Roboto”，“Noto”，无衬线；
字体大小：13px；
线高：1.5；
最小高度：100vh；
}
/*加载资源时渲染的样式设置*/
商店应用程序[未解决]{
显示：块；
最小高度：101vh；
线高：68px；
文本对齐：居中；
字体大小：16px；
字号：600；
字母间距：0.3em；
颜色：#202020；
填充：0 16px；
溢出：可见；
}
商店
window.performance&&performance.mark&&performance.mark（'index.html'）；

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

看起来您需要

webcomponents loader.js

文件。如果您没有使用node.js创建此文件（您可以学习），则需要自己查找该文件，或者安装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文件所在的位置。然后将脚本代码更改为

控制台中是否有任何错误？你可以发布一个可复制的例子吗？这是git@edrican的克隆代码，控制台中有错误吗？你是说代码中有错误吗？不，我猜在nodejs.org上安装Node.js和NPM之后，我如何安装js&NPM？您应该在控制台中运行“NPM i”将所有依赖项安装到Node_modules文件夹。如果您愿意，您也可以在将来使用它来运行您的应用程序后端。您好，我安装了Node.js，您能告诉我下一步怎么做吗？在这里，作者描述了必要的步骤。

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