Browserify 和 Babelify 给出 {classname} 未定义错误答案

【问题标题】：Browserify and Babelify give {classname} is not defined errorBrowserify 和 Babelify 给出 {classname} 未定义错误
【发布时间】：2020-05-04 19:02:25
【问题描述】：

鉴于此 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 文件，在我看来是我想要的，包括这个 sn-p：

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();

然后一切都按应有的方式运行 - 这很适合我的用例。

【问题讨论】：

标签： javascript browserify grunt-browserify babelify

【解决方案1】：

如果你观察整个输出文件 rob.js，你会注意到它实际上是一个IIFE。这意味着 rob.js 中的所有内容都不会对“外部世界”可见。你不能以这种方式与之交互。

您可以在“预编译”阶段使用 typescript 编写整个逻辑，也可以使用支持创作库的不同捆绑系统，例如 webpack

【讨论】：