Browserify и Babelify дают {classname} не определенная ошибка - PullRequest
Новая
       149

Browserify и Babelify дают {classname} не определенная ошибка

0 голосов
/ 04 мая 2020

Учитывая этот файл 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"
  }
}

Мои шаги были

  • nuke node_modules
  • run npm install (без предупреждений или ошибок)
  • run 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();

Тогда все работает так, как должно - что вполне подходит для моего варианта использования.

1 Ответ

1 голос
/ 04 мая 2020

Если вы наблюдаете весь грабитель выходного файла. js, вы заметите, что на самом деле это IIFE . Это означает, что все в грабе. js не будет видимо «внешнему миру». Вы не можете взаимодействовать с ним таким образом.

Вы можете либо написать всю логику c в фазе «предварительной компиляции», в машинописном тексте, либо использовать другую систему связывания, которая поддерживает такие библиотеки разработки, как веб-пакет

...