Javascript Browserify和Babelify未定义{classname}错误_Javascript_Browserify_Grunt Browserify_Babelify

Javascript Browserify和Babelify未定义{classname}错误

javascript

Javascript Browserify和Babelify未定义{classname}错误,javascript,browserify,grunt-browserify,babelify,Javascript,Browserify,Grunt Browserify,Babelify,给定此TS文件： export default class Rob { Start(): void { console.log("Hello, world!"); } } 我正在用一个看起来像这样的咕噜任务来转换它： browserify: { rob: { src: "./rob/rob.js", dest: "./wwwroot/rob.js", options: { trans

给定此TS文件：

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

我正在用一个看起来像这样的咕噜任务来转换它：

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

<!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>

{
  "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"
  }
}

我运行一个简单的HTML文件，如下所示：

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

<!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>

{
  "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\u模块
```
运行npm安装（无警告或错误）
运行
```
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以调用它自己（作为它自己的入口点）：

然后一切都按它应该做的那样运行-这非常适合我的用例。

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

您可以在“预编译”阶段用typescript编写整个逻辑，也可以使用支持编写库（如