メインコンテンツにスキップ
バージョン: 次期バージョン 🚧

テンプレート

Wailsは、事前に作成されたテンプレートからプロジェクトを生成します。 v1では、テンプレートがメンテナンス困難なプロジェクトとなり、時代遅れとなってしまう可能性がありました。 v2では、コミュニティを強化するために、テンプレートにいくつかの新機能が追加されました:

テンプレートの作成

テンプレートを作成するには、wails generate templateコマンドを使用します。 デフォルトのテンプレートを生成する場合は、次のコマンドを実行してください:

wails generate template -name mytemplate

これにより、デフォルトのファイルが含まれた"mytemplate"ディレクトリが作成されます:

mytemplate/
.
|-- NEXTSTEPS.md
|-- README.md
|-- app.tmpl.go
|-- frontend
| `-- dist
| |-- assets
| | |-- fonts
| | | |-- OFL.txt
| | | `-- nunito-v16-latin-regular.woff2
| | `-- images
| | `-- logo-dark.svg
| |-- index.html
| |-- main.css
| `-- main.js
|-- go.mod.tmpl
|-- main.tmpl.go
|-- template.json
`-- wails.tmpl.json

テンプレートの概要

デフォルトのテンプレートは、次のファイルおよびディレクトリで構成されています:

ファイル名 / ディレクトリ名説明
NEXTSTEPS.mdテンプレートを完成させる手順を記した説明
README.mdテンプレートとともに公開されるREADME
app.tmpl.goapp.goのテンプレートファイル
frontend/フロントエンドアセットを含むディレクトリ
go.mod.tmplgo.modのテンプレートファイル
main.tmpl.gomain.goのテンプレートファイル
template.jsonテンプレートのメタデータ
wails.tmpl.jsonwails.jsonのテンプレートファイル

このあとは、NEXTSTEPS.mdに記述されている手順に従うことを推奨します。

既存プロジェクトからのテンプレート作成

テンプレートの生成時にプロジェクトへのパスを渡すことで、既存のフロントエンドプロジェクトから、テンプレートを作成することができます。 ここでは、Vue3テンプレートの作成方法を説明します:

  • Vue Cliをインストールする: npm install -g @vue/cli
  • デフォルトのプロジェクトを作成する: vue create vue3-base
    • その際、Default (Vue 3) ([Vue 3] babel, eslint)を選択します
  • プロジェクトが作成されたあとに、次のコマンドを実行する:
> wails generate template -name wails-vue3-template -frontend .\vue3-base\
Extracting base template files...
Migrating existing project files to frontend directory...
Updating package.json data...
Renaming package.json -> package.tmpl.json...
Updating package-lock.json data...
Renaming package-lock.json -> package-lock.tmpl.json...
  • NEXTSTEPS.mdファイルに記述されているように、テンプレートをカスタマイズする
  • ファイルの準備ができたら、次のコマンドを実行してテストする: wails init -n my-vue3-project -t .\wails-vue3-template\
  • 新しいプロジェクトの動作をテストするために、次のコマンドを実行する: cd my-vue3-projectおよびwails build
  • プロジェクトがコンパイルされたら、実行する: .\build\bin\my-vue3-project.exe
  • Vue3アプリケーションが完全に動作していることを確認する

テンプレートの公開

テンプレートを公開するためにすることは、ファイルをGitHubにプッシュすることだけです。 以下のベストプラクティスを実施することを推奨します:

  • 不要なファイルやディレクトリ(.gitなど)をフロントエンドディレクトリから削除する
  • template.jsonがきちんと記述されていること、とくにhelpurlが記述されていることを確認する
  • ファイルをGitHubにプッシュする
  • コミュニティのテンプレートページにプルリクエストを作成する
  • Template Announcementのディスカッションボードでテンプレートをアナウンスする