Browserify 和 Babelify 給出 {classname} 未定義錯誤

Question

鑒於此 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 上看到了幾個這樣的問題，但這些問題似乎與濫用上下文有關（例如，在不合適的情況下，不是 this-ing 的東西或 this-ing 的東西）。 這里的上下文無關緊要； 我只想在控制台中看到我的 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();

然后一切都按應有的方式運行——這很適合我的用例。

Answer 1

如果你觀察整個 output 文件 rob.js，你會注意到它實際上是一個IIFE 。 這意味着 rob.js 中的所有內容都不會對“外部世界”可見。 你不能以這種方式與之交互。

您可以在“預編譯”階段，在 typescript 中編寫整個邏輯，或者您可以使用支持諸如webpack等創作庫的不同捆綁系統

Browserify 和 Babelify 給出 {classname} 未定義錯誤

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-04 20:02:27

Browserify 和 Babelify 給出 {classname} 未定義錯誤

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-04 20:02:27

解決方案1
1 已采納 2020-05-04 20:02:27