Настройка поддержки машинописи в Vaadin

Обновление . Vaadin 14.5 и более поздние версии поставляются со встроенной поддержкой машинописи. Следующие шаги требуются только для 14.4 и более ранних версий.

Некоторое время назад я создал небольшой демонстрационный проект , чтобы показать, что с Vaadin 14 теперь вы можете легко настроить свой проект для поддержки машинописи в шаблонах интерфейса.

Джованни , активный член сообщества, указал мне что я на самом деле не объяснил шаги, необходимые для того, чтобы заставить машинопись работать. Вместо того, чтобы хоронить шаги в билете на GitHub, я подумал, что напишу краткое сообщение в блоге с описанием шагов. Надеюсь, это поможет другим позже.

Это руководство протестировано с помощью Vaadin 14.

В дополнение к Java, вам нужно будет иметь Узел установлен.

Подготовьте свой проект Vaadin

Если у вас нет проекта Vaadin 14+, загрузите начальную версию по адресу vaadin.com/start .

Если у вас есть проект Vaadin, в котором запущена более ранняя версия Vaadin, прочитайте руководство по миграции и обновите проект, прежде чем продолжить.

Запустите пакет mvn один раз, чтобы убедиться, что Vaadin извлекает все необходимые зависимости

Установите TypeScript и его загрузчик веб-пакетов

В папке проекта запустите

установка npm –сохранить-ts-загрузчик машинописного текста для разработчиков

Настройте Webpack для обработки машинописного текста

Открыть webpack.config.js и отредактируйте объявление module.export следующим образом:

module.exports = merge(flowDefaults, {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  devtool: 'inline-source-map',
  module: {
    rules: [{
      // Include ts, tsx, js, and jsx files.
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'ts-loader',
    }],
  }
});

Здесь мы настраиваем Webpack для запуска всех файлов typescript и JavaScript через компилятор TypeScript. Причина, по которой мы также передаем файлы JavaScript компилятору TypeScript, заключается в том, что он может транспилировать более новый синтаксис JavaScript для поддержки старых браузеров, если это необходимо.

Настройка компилятора машинописного текста

В корневом каталоге проекта добавьте новый файл tsconfig.json со следующим содержимым

{
  "compilerOptions": {
    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "declaration": true /* Generates corresponding '.d.ts' file. */,
    "sourceMap": true /* Generates corresponding '.map' file. */,
    "strict": true /* Enable all strict type-checking options. */,
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */
  }
}

Дополнительные параметры, которые вы можете настроить, см. в файле в демо-версии .

Загрузите файл машинописного текста с Java

После настройки, о которой вы позаботились, теперь вы можете поместить файлы машинописного текста ( .ts ) в папку /интерфейса и загрузить их с помощью @Jsmodule с Java.

/src/main/java/…/LitTemplate.java

@Tag("lit-template")
@JsModule("./src/lit-template.ts")
public class LitTemplate extends Component {
//...
}

Это оно.

Вы можете ознакомиться с полным демо-источником здесь: Вы можете ознакомиться с полным демо-источником здесь:

Если у вас есть какие-либо вопросы, опубликуйте их ниже или свяжитесь со мной в Twitter @marshallberg

Оригинал: “https://dev.to/marcushellberg/setting-up-typescript-support-in-vaadin-bf9”