Javascript - 无法从脚本标签访问模块变量[重复]答案

【问题标题】：Javascript - Unable to access module variable from script tag [duplicate]Javascript - 无法从脚本标签访问模块变量[重复]
【发布时间】：2020-02-07 07:25:10
【问题描述】：

大家好，我是 javascript 新手。

我写了下面的代码paths.js

import { App } from './App.js';
import { Helper } from './helper.js';

var tempVar = new class {
  constructor() {
    this.App = new App();
    this.helper = new Helper(this);
  }
}

App.js

export class App {
  constructor() {

  }
}

Helper.js

export class Helper {
  constructor(paths) {

  }
}

像这样在 index.html 文件中导入上面的代码

<script type="module" src="paths.js"></script>

现在我需要从另一个脚本标签访问 tempVar

<script>
  console.log(tempVar);
</script>

如何做到这一点。或者我做错了什么或误解了代码。

我收到类似 tempVar 未定义的错误。

【问题讨论】：

您遇到了哪些异常？而App.js和helper.js的内容是什么？
@Titulum 问题已更新
简而言之：您不能从另一个内联脚本访问 type=module 脚本中定义的变量。如果你想调试一些东西，你可以像这样将tempVar附加到window：window.tempVar = new class {...}，然后像这样访问它：console.log(window.tempVar);。

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

首先，为了使用模块，您必须使用 http 服务器来提供文件。您可以通过在文件夹中添加这个小 server.js 轻松做到这一点：

const express = require('express');
const app = express();
app.use(express.static('.'));
app.listen(8080);

首先，通过运行npm install express 安装express 包，然后通过运行node server.js 启动服务器。

然后，您可以通过导航到 http://localhost:8080 来请求您的 html 文件。然后，您将收到以下错误：

ReferenceError: tempVar 未定义

这是因为您的module 在您的内联脚本之后被加载。要更改此行为，请将所有 JavaScript 逻辑添加到 paths.js。如果你像这样改变它：

import { App } from './modules/App.js';
import { Helper } from './modules/helper.js';

var tempVar = new class {
  constructor() {
    this.App = new App();
    this.helper = new Helper(this);
  }
}

console.log(tempVar);

它应该正确打印tempVar的内容！

【讨论】：

【解决方案2】：

class App  {
    constructor(){
        document.write('Hello! programmer?<br />');
    }
}

class Helper{
    constructor(paths){
        document.write('Hello! Coder?<br />');
    }
}
let Paths = new class  {

    constructor(){
        this.App = new App();
        this.Helper = new Helper(this);
    }
}

//index.html

    <!DOCTYPE html >
    <html charset='utf-8'>
      <head>

      </head>
      <body>
        <script type="text/javascript" src="paths.js"></script>
        <script type="text/javascript">
          let Path = new Paths();
          //console.log(Path);

        </script>

      </body>
    </html>

//NOTE:

You may also refer to the following link to learn on how to declare or use classes in es6  [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes][1]


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

【讨论】：