0

この TS ファイルを考えると:

export default class Rob {
    Start(): void {
        console.log("Hello, world!");
    }
}

次のような Grunt タスクで変換しています。

browserify: {
    rob: {
        src: "./rob/rob.js",
        dest: "./wwwroot/rob.js",
        options: {
            transform: [["babelify", { "presets": ["@babel/preset-env"] }]]
        }
    }
}

次のような単純な HTML ファイルを実行します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test bed</title>
    <script src="rob.js"></script>
    <script>
        window.addEventListener("DOMContentLoaded", function () {
            var r = new Rob();
            r.Start();
        });
    </script>
</head>
<body>
    <p>Hello, world!</p>
</body>
</html>

その結果、Uncaught ReferenceError: Rob is not defined

SO でこのような質問をいくつか見たことがありますが、それらは文脈の誤用に関連しているように見えました (たとえば、これが適切でない場合に、これを何かに使用したり、これを何かに使用したりしないなど)。ここでは文脈は関係ありません。コンソールに console.log を表示したいだけです。

私package.jsonはこのように見えます：

{
  "version": "1.0.0",
  "name": "robtest",
  "private": true,
  "devDependencies": {
      "@babel/core": "7.9.6",
      "@babel/preset-env": "7.9.6",
      "babel-preset-es2015": "7.0.0-beta.3",
      "babelify": "10.0.0",
      "grunt": "^1.1.0",
      "grunt-browserify": "5.3.0"
  }
}

私の手順は

  • 核兵器node_modules
  • 実行npm install(警告またはエラーなし)
  • 実行grunt rob(警告またはエラーなし)

これにより、次のスニペットを含む、私が望むものについて私の目に見えるJSファイルが出力されます。

var Rob = /*#__PURE__*/function () {
  function Rob() {
    _classCallCheck(this, Rob);
  }

  _createClass(Rob, [{
    key: "Start",
    value: function Start() {
      console.log("Hello, world!");
    }
  }]);

  return Rob;
}();

exports["default"] = Rob;

また、Chrome は正常に読み込まれたrob.jsことを通知し、HTML ページが読み込まれるとソース エクスプローラーでコンテンツを確認できます。

私の質問は単純です: なぜこの例で参照エラーが発生するのですか?

編集：受け入れられた回答への少しの追加として：tsを編集して自分自身を呼び出す場合（独自のエントリポイントとして機能するため）：

export default class Rob {
    Start(): void {
        console.log("Hello, world!");
    }
}
const r = new Rob();
r.Start();

その後、すべてが正常に実行されます-これは私のユースケースにぴったりです。

4

1 に答える 1