Компиляция AOT (Ahead-Of-Time) с ES5

Возможно ли сделать компиляцию AOT в Angular с использованием только ES5?

В целом, могу ли я использовать плагин NGTools Webpack с ES5?

Я знаю, что TypeScript является предпочтительным языком выбора для Angular, однако мое место работы не одобрило использование TypeScript для нашего проекта Angular. Из-за этого мои руки немного связаны, и я не хочу, чтобы производительность зависела от клиента.

Некоторая релевантная информация о моем проекте:

  • Webpack 2 для сборки/упаковки
  • Написано в ES2015, переведенном на ES5 с помощью Babel

Я просмотрел все и не смог найти ясного ответа на это, я бы очень признателен за любую информацию, которую любой может предоставить.

Спасибо заранее!

Ответы

Ответ 1

В файле tsconfig.json установите цель на es5.

    "target": "es5",

Ответ 2

Angular должен быть полностью совместим с ES5.

Процесс компиляции AOT использует метаданные, привязанные к компонентам. Вот как он находит шаблоны и стили, которые нужно компилировать.

TypeScript является предпочтительным способом для написания компонентов. Поскольку это позволяет использовать функцию аннотации @Component для прикрепления метаданных.

ES6 является вторичным методом, а Angular поддерживает декораторы ES6 для прикрепления метаданных к компонентам.

ES5 более простой. Нет никакого автоматического способа прикрепления метаданных, но компилятор AOT будет искать массив annotations, прикрепленный к прототипу объекта.

Вот как вы это сделаете, используя ES5

HeroComponent.annotations = [
     new ng.core.Component({
        selector: 'hero-view',
        template: '<h1>{{title}}: {{getName()}}</h1>'
     })
];

Итак, чтобы ответить на ваш вопрос. Да, вы все еще можете использовать AOT с ES5.

Ответ 3

Поскольку ваш исходный код ES2015, вы можете использовать компилятор AOT непосредственно на вашем JavaScript-коде ES2015. Где вы использовали декораторы на классах. Вы можете скомпилировать ES5 непосредственно из компилятора AOT, не используя сначала Babel. В большинстве библиотек angular также есть цель ES5 для совместимости со старыми браузерами. Для этого вы устанавливаете уже указанную настройку в tsconfig.json

"target": "es5",

Проверьте также официальную статью об AOT. Компилятор AOT

Компилятор AOT по существу является компилятором typescript с дополнительными функциями, которые он будет работать и с JavaScript. Код JavaScript также действителен в TypeScript. Посмотрите на первый пример в учебнике typescript. TypeScript через 5 минут

Я немного экспериментировал с этим, и для меня это работает, если я меняю файлы .js на .ts без изменения кода. Компилятор typescript также имеет возможность поддерживать файлы .js.

"allowJs": true,

В моих тестах похоже, что компилятор AOT игнорирует это, потому что я получил ошибки, если использовал файлы .js, поэтому я думаю, что вам нужно переименовать файлы в .ts, как я упоминал ранее. Я тестировал с помощью плагина webpack от NGTools.

Если вы все еще хотите использовать Babel для преобразования ES5, вы можете установить цель компилятора typescript/AOT на ES2015, чтобы выход по-прежнему был кодом ES2015, а затем передал его в Babel после компиляции AOT.