1. 仮想DOMアーキテクチャを使用したOracle JETアプリケーションの開発
  2. Webアプリケーション・ワークフローの理解

2 Webアプリケーション・ワークフローの理解

Oracle JETによる仮想DOMアプリケーションの開発は、選択した開発環境、および開発プロセスを簡単にするためのスタータ・テンプレートを使用して、単純かつ効率的になるように設計されています。

Oracle JETでは、コマンドライン・インタフェースからWebアプリケーションを作成できます:

  • CLIを使用して最初のOracle JET Webアプリケーションを作成する前に、前提条件パッケージをインストールする必要があります(まだインストールしていない場合)。詳細は、「Oracle JETツールのインストール」を参照してください。

  • 次に、Oracle JETコマンドライン・インタフェース・パッケージ(ojet-cli)を使用して、必要に応じて変更可能な事前構成済のアプリケーションを作成する基本的なスタータ・テンプレートを使用してWebアプリケーションをスキャフォールドします。

  • アプリケーションをスキャフォールドしたら、ojet-cliを使用してアプリケーションを作成し、それをローカルWebブラウザに提供して、デプロイメントの準備ができたパッケージを作成できます。

Webアプリケーションの同一HTMLドキュメントにコンポーネントを追加する場合に、Oracle JETの複数のバージョンを使用しないでください。Oracle JETでは、同じWebページで複数のバージョンのOracle JETコンポーネントを実行することをサポートしていません。

Webアプリケーションのスキャフォールド

スキャフォールドは、Oracle JETコマンドライン・インタフェース(CLI)で使用するプロセスであり、コンテンツ領域、ヘッダーおよびフッター・レイアウトを使用して事前構成されたアプリケーションを作成します。スキャフォールドした後、必要に応じてアプリケーションを変更できます。

次の図は、スタータ・テンプレートによって生成されたアプリケーションを示しています。画面サイズの変更時に表示を調整するレスポンシブ・スタイルが含まれます。

周囲のテキストで説明された画像

CLIを使用して最初のOracle JET Webアプリケーションを作成する前に、前提条件パッケージをインストールする必要もあります(まだインストールしていない場合)。詳細は、「Oracle JETツールのインストール」を参照してください。

Oracle JET Webアプリケーションをスキャフォールドするには:
  1. コマンド・プロンプトで、オプション引数を指定してojet createを入力し、Oracle JETアプリケーションおよびスキャフォールディングを作成します。
    ojet create [directory]
            [--template={template-name:[basic]|template-url|template-file}] 
            [--vdom]
            [--use-global-tooling]
            [--help]

    ヒント:

    ターミナル・プロンプトでojet helpと入力して、Oracle JET CLIのその他のヘルプを取得することができます。

    たとえば、次のコマンドでは、basicテンプレートを使用してmy-First-JET-VDOM-appディレクトリにWebアプリケーションが作成されます: 

    ojet create my-First-JET-VDOM-app --template=basic --vdom

    アプリケーション・ディレクトリにローカルにインストールするのではなく、グローバルにインストールされた@oracle/oraclejet-toolingを使用するWebアプリケーションをスキャフォールドするには、次のコマンドを入力します: 

    ojet create my-web-app --use-global-tooling --vdom
  2. 確認されるまで待ちます。

    スキャフォールディングが完了するまでに、少し時間がかかる場合があります。成功すると、コンソールに次のように表示されます:

    Oracle JET: Your app is ready! Change to your new app directory my-First-JET-VDOM-app and try ojet build and serve...
  3. 開発環境で、アプリケーションのコードを更新します。

仮想DOMアプリケーション・レイアウトについて

Oracle JETツールにより、必要なソース・ファイルとディレクトリ構造を備えたアプリケーションが作成されます。

新規アプリケーションのディレクトリ構造は、次の図で示すようになります。

仮想DOMアプリケーション・ファイル構造

アプリケーション・フォルダには、アプリケーションおよび構成ファイルが含まれており、独自のアプリケーションに対して必要に応じて変更します。

ディレクトリまたはファイル 説明

node_modules

ツールで使用されるNode.jsモジュールが含まれます。

scripts

テンプレート・フック・スクリプトが含まれ、これらを変更してアプリケーションの新しいビルド・ステップと処理ステップを定義できます。「Webアプリケーション・ツールのワークフローのカスタマイズ」を参照してください

src

アプリケーションのサイト・ルート。アプリケーション・ファイルが含まれています。これらは必要に応じて独自のアプリケーションに合せて変更でき、ソース・コントロールにコミットする必要があります。スタータ・テンプレートには、開始に役立つfooter、headerおよびcontentコンポーネントをインポートするappコンポーネントが含まれています。

.gitignore

GITリポジトリを使用してアプリケーション・ソースをチェックインする場合に無視するアプリケーション・フォルダのルールを定義します。GITリポジトリを使用しないユーザーはojet stripを使用して、Oracle JETによって常に再生成されるコンテンツをチェックインしないようにできます。このファイルは、ojet stripコマンドが依存しているため、削除できません。

oraclejetconfig.json

デフォルトのソースおよびステージング・ファイル・パスが含まれ、アプリケーションのファイル構造を変更する必要がある場合に変更できます。

package.json

npm依存性とプロジェクト・メタデータを定義します。

仮想DOMアプリとVComponentベースのWebコンポーネントのどちらを開発している場合でも、srcディレクトリの下にあるファイルにコードを記述します。Oracle JETツールでは、アプリケーションの構築や提供、またはWebコンポーネントを含むJETパックの公開時に、対応するwebおよびdistディレクトリが作成されます。 

||| Contents of virtual DOM app directory prior to build or serve
|   oraclejetconfig.json
|   package-lock.json
|   package.json
|   path_mapping.json
|   tsconfig.json
+---scripts
|   +---config
|   \---hooks
\---src
    |   index.html
    |   index.ts
    |   main.js
    +---components
    |   |   app.tsx
    |   |   footer.tsx
    |   |   header.tsx
    |   \---content
    |           index.tsx
    \---styles
        |   app.css
        +---fonts
        \---images
                ...
                oracle_logo.svg

Oracle JET仮想DOMアーキテクチャでは、モジュールを使用してVComponentを編成し、Oracle JETツールによってプロジェクトのモジュールを管理します。

カスタム要素ベースのVComponentは、コンポーネントの名前に一致する名前を持つディレクトリに存在する必要があります。つまり、oj-hello-worldカスタム・コンポーネントは、oj-hello-worldという名前のディレクトリに存在する必要があります。デフォルトでは、仮想DOMアプリケーション内のすべてのコンポーネントを格納するディレクトリの名前はcomponentsですが、仮想DOMアプリケーションのルート・ディレクトリにあるoraclejetconfig.jsonファイル内のcomponentsの値を編集して、別の値に変更できます。 

{
  "paths": {
    "source": {
      ...,
      "components": "changeToYourPreferredValue",
      ...
    },
    ...

oj-hello-worldという名前のカスタム要素ベースのVComponentに関する次の例に示すように、各カスタム要素ベースのVComponentには付属のloader.tsモジュール・ファイルが必要です。Oracle Visual Builder、Oracle Component ExchangeおよびOracle JETツール自体に必要であるため、Oracle JETツールにはこのファイルが含まれています。 

...
+---src
|   index.html
...
+---components
|   |   app.tsx
|   |   footer.tsx
|   |   header.tsx
|   |
|   +---content
|   |       index.tsx
|   |
|   \---oj-hello-world
|       |   loader.ts
|       |   oj-hello-world-styles.css
|       |   oj-hello-world.tsx
|       |   README.md
|       |
|       +---resources
|       |   \---nls
|       |           oj-hello-world-strings.ts
|       |
...

Oracle JETツールではコンポーネントを個別に管理できますが、複数のコンポーネントを作成する場合は、パック内のコンポーネント(JETパックとも呼ばれる)を管理することをお薦めします。

仮想DOMアプリケーションのバインディング・プロバイダについて

Oracle JETのデフォルトのバインディング・プロバイダはKnockoutです。使用するバインディング・プロバイダは、Oracle JETカスタム要素のレンダリング方法に影響します。

デフォルトのバインディング・プロバイダ(data-oj-binding-provider="knockout")を使用した場合、oj-list-viewなど、すべてのOracle JETカスタム要素は、レンダリングの前にバインディング適用トラバーサルが完了するのを待ちます。Preact環境(仮想DOMアプリケーション)でOracle JETカスタム要素が使用されている場合は、preactバインディング・プロバイダ(data-oj-binding-provider="preact")を使用する必要があります。

VComponentベースのWebコンポーネントは、子コンポーネントにかわってバインディング・プロバイダを暗黙的にpreactに設定します。その結果、VComponent内のOracle JETカスタム要素は、preactバインディング・プロバイダを使用します。ただし、仮想DOMアプリケーションの場合、アプリケーション開発者は、DOM内のOracle JETカスタム要素を追加する場所の上に手動でバインディング・プロバイダを構成する必要があります(data-oj-binding-provider="preact")。次のコード・スニペットは、バインディング・プロバイダをpreactに設定する方法の3つの例を示しています。 

// Update the entry in the appRootDir/src/index.html file of your virtual DOM app
<body class="oj-web-applayout-body" data-oj-binding-provider="preact">

// Set the data-oj-binding-provider="preact" on a parent element to a collection
// of JET custom elements
<body>
    <div id="preact-content-goes-here" data-oj-binding-provider="preact">
     <oj-button . . .>	
   	  <oj-list-view . . .>
    </div>

// Set the data-oj-binding-provider="preact" on an individual JET custom element
<oj-list-view data-oj-binding-provider="preact"...>

ノート:

仮想DOMアプリケーションの作成時にOracle JETツールで生成されるindex.htmlファイルは、アクティブなバインディング・プロバイダのない通常のHTMLドキュメントです。このため、<body ... data-oj-binding-provider="none">の使用は適切です。Oracle JETツールがindex.htmlファイルに生成する<app-root>要素は、VComponentベースのWebコンポーネントで、他のVComponentベースのWebコンポーネントと同様に、参照する子コンポーネントのかわりにバインディング・プロバイダをpreactに設定することにも注意してください。

バインディング・プロバイダの詳細は、『Oracle® JavaScript Extension Toolkit (JET)APIリファレンス』のバインディング・プロバイダに関する項を参照してください。

WebアプリケーションへのプログレッシブWebアプリケーション・サポートの追加

JET Webアプリケーションにアクセスするデバイスでネイティブのようなモバイル・アプリケーションのエクスペリエンスをユーザーに提供する場合は、JET WebアプリケーションにプログレッシブWebアプリケーション(PWA)サポートを追加します。

ojet add pwaコマンドを使用して、サービス・ワーカー・スクリプトとWebマニフェストの両方をJET Webアプリケーションに追加します。これらのアーティファクトをカスタマイズして、PWAとしてアクセスした場合のJET Webアプリケーションの動作を決定できます。

PWAサポートをWebアプリケーションに追加するには:
  1. ターミナル・プロンプトで、アプリケーションの最上位ディレクトリから次のコマンドを入力して、JET WebアプリケーションにPWAサポートを追加します:
    ojet add pwa

コマンドを実行すると、Oracle JETツールによってJET Webアプリケーションに次の変更が加えられます:

  • 次の2つのファイルをアプリケーションのsrcフォルダに追加します:
    • manifest.json

      このファイルは、JET WebアプリケーションでのPWAサポートと、ユーザーのデスクトップまたはモバイル・デバイスにインストールされた場合のPWAの動作をブラウザに示します。このファイルを使用して、ユーザーのデバイスに表示するアプリケーション名とデバイス固有のアイコンを指定します。このファイルで指定できるプロパティの詳細は、Webアプリケーション・マニフェストの追加に関するページを参照してください。

    • sw.js

      これは、ブラウザがバックグラウンドで実行するサービス・ワーカー・スクリプトです。このファイルを使用して、PWAサービス・ワーカーがインストールされている場合にユーザーのデバイスにキャッシュする、JETアプリケーションからの追加のリソースを指定します。デフォルトでは、JETはキャッシュする次のリソースを指定します:

      const resourcesToCache = [
  'index.html',
  'manifest.json',
  'js/',
  'css/'
];
  • マニフェスト・ファイルおよびサービス・ワーカー・スクリプトをJET Webアプリケーションの./src/index.htmlファイルに登録します:
    <html lang="en-us">
  <head>
  ...
  <link rel="manifest" href="manifest.json">
</head>
...
<script type="text/javascript">
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js').then(function(registration) { 
      // Registration was successful 
      console.log('myPWAapp ServiceWorker registration successful with scope: ', registration.scope); 
    }).catch(function(err) {
    // registration failed 
      console.log('myPWAapp ServiceWorker registration failed: ', err);
    });
  }
</script>
</body>

この変更により、Android端末などのモバイル・デバイスのユーザーは、ChromeブラウザでURLからJET Webアプリケーションにアクセスし、端末のホーム画面にアプリケーションを追加した後は、端末上の他のアプリケーションと同様に起動できるようになります。PWAに対するブラウザとプラットフォームのサポートは統一されていないことに注意してください。最適なエクスペリエンスを確保するには、PWA対応のJET Webアプリケーションをユーザーのターゲット・プラットフォーム(Android、iOSなど)およびブラウザ(Chrome、Safariなど)でテストします。

PWA対応のJET Webアプリケーションおよびサービス・ワーカーにはHTTPSが必要です。PWA対応のJET Webアプリケーションをデプロイする本番環境では、アプリケーションがHTTPSを介して処理されます。開発中にJET WebアプリケーションをHTTPS対応サーバーに提供する場合は、「自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理」を参照してください。

Webアプリケーションのビルド

Oracle JETコマンドライン・インタフェース(CLI)を使用して、ブラウザに提供する前に、Webアプリケーションの開発バージョンを作成します。このステップはオプションです。

アプリケーションのルート・ディレクトリに移動し、ojet buildコマンドを使用してアプリケーションをビルドします。 

ojet build [--cssvars=enabled|disabled 
            --theme=themename
            --themes=theme1,theme2,...]

ヒント:

ターミナル・プロンプトでojet helpと入力して、特定のOracle JET CLIオプションに関するヘルプを取得することができます。
コマンドは完了に時間がかかることがあります。成功すると、次のメッセージが表示されます。 
Done.

また、このコマンドは、ビルドされたコンテンツを含むWebフォルダをアプリケーションのルートに作成します。

ノート:

また、--releaseオプションを指定してojet buildコマンドを使用すると、アプリケーションのリリース対応バージョンをビルドすることもできます。詳細は、「アプリケーションのパッケージ化およびデプロイ」を参照してください。

Webアプリケーションの提供

ojet serveを使用して、テストおよびデバッグのためにWebアプリケーションをローカルWebサーバーで実行します。デフォルトで、アプリケーション・コードに加えた変更がブラウザに即時に反映されるOracle JETライブ・リロード・オプションが有効です。

ターミナル・プロンプトからWebアプリケーションを実行するには:
  1. ターミナル・プロンプトで、アプリケーションのルート・ディレクトリに移動し、オプションの引数を指定してojet serveコマンドを使用し、アプリケーションを起動します。
    ojet serve [--server-port=server-port-number --livereload-port=live-reload-port-number
            --livereload
            --watch-files
            --build
            --theme=themename --themes=theme1,theme2,...
            --server-only
            --server-url=server-url
           ]
    たとえば、次のコマンドは、デフォルトのWebブラウザでライブ・リロードを有効にしてアプリケーションを起動します。
    ojet serve
  2. srcフォルダで必要なコード変更を行うと、--no-livereloadフラグを設定しないかぎり、ブラウザが自動的に更新されて変更が反映されます。

    アプリケーションの実行中は、ターミナル・ウィンドウが開いたままになり、監視タスクがアプリケーションの変更を待機しています。たとえば、src/components/oj-hello-world/oj-hello-world-styles.cssの内容を変更すると、Windowsデスクトップで次のように、ウォッチ・タスクに端末の変更が反映されます。 

    . . .
Watcher: themes is ready.
Changed: C:\jetVDOMapp\src\components\content\index.tsx
Running before_watch hook.
Compile application typescript
Running before_app_typescript hook.
Compile application typescript finished
Running after_watch hook.
Page reloaded resume watching.
  3. プロセスを終了するには、アプリケーションを閉じて、ターミナル・プロンプトで[Ctrl]キーを押しながら[C]キーを押します。プロセスを終了するには、[Ctrl]キーを押しながら[C]キーを押す操作を数回実行する必要がある場合があります。

サポートされているojet serveオプションの詳細なヘルプを表示するには、ターミナル・プロンプトでojet serve --helpと入力します。

ojet serveコマンド・オプションとExpressミドルウェア関数について

ojet serveを使用して、テストおよびデバッグのためにWebアプリケーションをローカルWebサーバーで実行します。

次の表では、使用可能なojet serveのオプションを説明し、その使用例を示します。

Oracle JETツールでは、Node.js Webアプリケーション・フレームワークであるExpressを使用して、ojet serveの実行時にWebアプリケーションを設定およびホストします。すぐに使用できるojet serveオプションが要件を満たしていない場合は、Express構成オプションを追加するか、Oracle JETのbefore_serve.jsフック・ポイントにExpressミドルウェア関数を記述できます。Express構成オプションを追加する方法を示す例は、「自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理」を参照してください。

before_serveフック・ポイントは、既存のミドルウェアを置換するか、既存のミドルウェアの前にミドルウェア関数を追加するかを決定するオプションを提供します。通常、Webアプリケーションを提供した後もライブ・リロードが引き続き機能するようにする場合は、記述するミドルウェア関数(preMiddleware)を付加します。ライブ・リロードは、Oracle JETツールが使用する最初のミドルウェアです。ライブ・リロードなどの後続のミドルウェア関数をExpressインスタンスで起動する場合は、記述するミドルウェア関数の引数としてnext関数を使用する必要があります。要約すると、次のいずれかの引数を使用して、Expressミドルウェア関数を実行するタイミングを決定します:

  • preMiddleware: デフォルトのOracle JETツール・ミドルウェアの前に実行します。デフォルトのOracle JETツール・ミドルウェアは、connect-livereload、serve-staticおよびserve-indexで構成され、この順序で実行されます。
  • postMiddleware: デフォルトのOracle JETツール・ミドルウェアの後に実行します。
  • middleware: デフォルトのOracle JETツール・ミドルウェアを置き換えます。ミドルウェアの実行順序を厳密に制御する必要がある場合に使用します。Oracle JETツールによって以前に追加されたすべてのデフォルト・ミドルウェアを再定義する必要があります。
オプション 説明

server-port

サーバーのポート番号。値を指定しない場合は、デフォルトで8000に設定されます。

livereload-port

ライブ・リロード・ポート番号。値を指定しない場合は、デフォルトで35729に設定されます。

watch-files

ウォッチ・ファイル機能を有効にします。ウォッチ・ファイルはデフォルトで有効になっています(--watch-files=true)。

ウォッチ・ファイル機能を無効にするには、--watch-files=falseまたは--no-watch-filesを使用します。

ウォッチ・ファイルを無効にすると、ライブ・リロード機能も無効になります。

oraclejetconfig.jsonファイルのwatchIntervalプロパティの値を構成して、ウォッチ・ファイル機能でOracle JETプロジェクトの更新をポーリングする間隔を構成します。デフォルト値は1000ミリ秒です。

livereload

ライブ・リロード機能を有効にします。ライブ・リロードはデフォルトで有効になっています(--livereload=true)。

ライブ・リロード機能を無効にするには、--livereload=falseまたは--no-livereloadを使用します。

ライブ・リロードの無効化が役立つのは、IDEで作業していて、更新したアプリケーションのロードにそのIDEのメカニズムを使用する場合です。

ライブ・リロード機能がOracle JETプロジェクトをポーリングする間隔は、watch-filesオプションによって決まります。

build

アプリケーションを提供する前に作成します。デフォルトでは、アプリケーションは提供する前に作成されます(--build=true)。

アプリケーションがすでに作成されており、提供のみ行う場合は、--build=falseまたは--no-buildを使用して作成を抑制します。

theme

アプリケーションに使用するテーマ。テーマのデフォルトはredwoodです。

themes

カンマで区切られた、アプリケーションに使用するテーマ。

前述のとおりに--themeフラグを指定しない場合は、Oracle JETにより、デフォルト・テーマとして、--themesで指定した最初の要素が使用されます。そうでない場合は、Oracle JETにより、--themeで指定したテーマを使用してアプリケーションが提供されます。

server-only

ブラウザに提供するときのようにアプリケーションが提供されますが、ブラウザは起動されません。このオプションは、クラウドベースの開発環境で開発マシンに提供されたアプリケーションにブラウザをアタッチできるようにするために使用します。

server-url

サービス元のサーバーURLを指定します。たとえば、ojet serve --server-url=https://www.example.com/jetです。指定しない場合、デフォルトはlocalhostになります。

自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理

Webアプリケーションが、Oracle JETのojet serveコマンドで使用されるデフォルトのHTTPサーバーではなく、HTTPSサーバーで処理されるよう、JET CLIツールをカスタマイズできます。

これは、たとえば開発環境を、Webアプリケーションが最終的にデプロイされる本番環境により近いものにする場合に行います。本番環境にデプロイされたWebアプリケーションへのリクエストは、SSL対応のHTTPサーバー(HTTPS)で処理されます。

この動作を実装するには、Webアプリケーション・ディレクトリに証明書をインストールする必要があります。また、次の操作を行うためには、before_serve.jsフックを構成する必要があります:

  • 処理対象のWebアプリケーションをホストするExpressのインスタンスを作成する。

  • 作成したExpressインスタンスでHTTPSを設定する。HTTPSプロトコルを指定し、アプリケーション・ディレクトリに配置した自己署名証明書の場所を特定して、パスワードを指定します。
  • 変更したExpressインスタンスおよびSSL対応サーバーをJETツールに渡し、ojet serveがOracle JETツールによって用意された、すぐに使用可能なミドルウェア構成ではなく、ユーザーのミドルウェア構成を使用するようにする。
  • WebアプリケーションがHTTPSサーバーで処理されるときにライブ・リロードが機能するよう、ライブ・リロード・サーバーのインスタンスも作成し、SSLを使用するよう構成する。

認証局が発行した証明書を使用できない場合は、独自の証明書(自己署名証明書)を作成できます。OpenSSL、Macのキーチェーン・アクセス、Java Development Kitのkeytoolユーティリティなどのツールを使用して、このタスクを実行できます。たとえば、Git for Windowsに付属のGit Bashシェルを使用して、次のコマンドを実行し、OpenSSLツールで自己署名証明書を作成できます:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

使用する自己署名証明書を取得したら、アプリケーションのディレクトリにインストールします。たとえば、前のコマンドで生成された2つのファイルをアプリケーションのルート・ディレクトリに配置します:

...
.gitignore
cert.pem
key.pem
node_modules
...

アプリケーションに自己署名証明書をインストールしたら、before_serveフック・ポイントのスクリプトを構成します。これを行うには、エディタでAppRootDir/scripts/hooks/before_serve.jsを開き、次の構成例のコメントに従って構成します。 


'use strict';

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running before_serve hook.");

    // Create an instance of Express, the Node.js web app framework that Oracle 
    // JET tooling uses to host the web apps that you serve using ojet serve
    const express = require("express");

    // Set up HTTPS 
    const fs = require("fs");
    const https = require("https");
    
    // Specify the self-signed certificates. In our example, these files exist 
    // in the root directory of our project.
    const key = fs.readFileSync("./key.pem");
    const cert = fs.readFileSync("./cert.pem");
    // If the self-signed certificate that you created or use requires a 
    // password, specify it here:
    const passphrase = "1234";

    const app = express();

    // Pass the modified Express instance and the SSL-enabled server to the Oracle JET tooling
    configObj['express'] = app;
    configObj['urlPrefix'] = 'https';
    configObj['server'] = https.createServer({
      key: key,
      cert: cert,
      passphrase: passphrase
    }, app);

    // Enable the Oracle JET live reload option using its default port number so that
    // any changes you make to app code are immediately reflected in the browser after you
    // serve it
    const tinylr = require("tiny-lr");
    const lrPort = "35729";

    // Configure the live reload server to also use SSL
    configObj["liveReloadServer"] = tinylr({ lrPort, key, cert, passphrase });

    resolve(configObj);
  });
};

この構成ステップが完了したら、Webアプリケーションのビルドや処理で普段実行する一連のコマンド(ojet buildやojet serveなど)を実行します。使用している証明書は、認証局が発行した証明書ではなく自己署名証明書であるため、Webアプリケーションへの初回アクセス時には、Webアプリケーションへのアクセスに使用するブラウザに警告が表示されます。警告を確認し、Webアプリケーションへのアクセスを許可するオプションをクリックします。たとえば、Google Chromeでは、Webアプリケーションがhttps://localhost:8000/で処理される場合、「詳細設定」、「localhostにアクセスする(安全ではありません)」の順にクリックします。

ブラウザでWebアプリケーションが開くと、HTTPSプロトコルが使用されていることがわかり、認証局からの証明書を使用していないため、接続が安全ではないことを示すインジケータが表示されています。また、証明書情報を表示して、作成した自己署名証明書であることを確認することも可能です。Google Chromeで、「保護されていない通信」、「証明書」の順にクリックして証明書情報を表示します。

httpsserver.pngの説明が続きます
図httpsserver.pngの説明

before_serveフック・ポイントは、Oracle JETアプリケーションのツール・ワークフローのカスタマイズに使用できる一連のスクリプト・フック・ポイントの1つです。「Webアプリケーション・ツールのワークフローのカスタマイズ」を参照してください。

Webアプリケーション・ツールのワークフローのカスタマイズ

Oracle JETツールで定義されているフック・ポイントを使用すると、ツールのワークフローで実行する新しいステップを定義する場合に、ユーザー記述のスクリプト・コードを使用して、JETビルド・プロセスと提供プロセスの動作をカスタマイズできます。

アプリケーションの作成時、Oracle JETツールによって/scripts/hooksアプリケーション・サブフォルダにスクリプト・テンプレートが生成されます。Oracle JETツールのワークフローをカスタマイズするには、ビルド・プロセスと提供プロセス中に特定のフック・ポイントでツールに実行させる必要があるスクリプト・コードを使用して、生成済のテンプレートを編集します。カスタム・フック・ポイント・スクリプトが作成されていない場合、Oracle JETツールはスクリプト・テンプレートを無視して、ビルド・プロセスと提供プロセスのデフォルトのワークフローを実行します。

ビルド・プロセスまたは提供プロセスのワークフローをカスタマイズするには、特定のフック・ポイントの名前が付いた生成済のスクリプト・テンプレートを編集します。たとえば、ツールのビルド・プロセスの開始時にスクリプトをトリガーするには、ビルドが開始される前にトリガーされるフック・ポイントの名前が付いたbefore_build.jsスクリプトを編集します。そのフックポイントの名前はbefore_buildです。

したがって、Oracle JETツールのワークフローで実行するビルド・プロセスと提供プロセスをカスタマイズする場合、ユーザーはカスタマイズ・スクリプトを記述する前に次の詳細情報を把握している必要があります。

  • カスタマイズするOracle JETのビルド・モードまたは提供モード:

    • デバッグ — アプリケーションのビルド時または提供時のデフォルト・モードで、ビルドされたアプリケーションのソース・コードが生成されます。

    • リリース — --releaseオプションを指定してアプリケーションをビルドする場合のモードで、リリース対応アプリケーションの縮小されたバンドル・コードが生成されます。

  • カスタマイズをトリガーする適切なフック・ポイント。

  • カスタマイズするデフォルトのフック・スクリプト・テンプレートの場所。

Webアプリケーションのスクリプト・フック・ポイントについて

Oracle JETのフック・システムでは様々なスクリプト・トリガー・ポイント(フック・ポイントとも呼ばれる)が定義されており、これを使用して各種コマンドライン・インタフェース・プロセスでの作成、ビルド、提供、パッケージ化およびリストア・ワークフローをカスタマイズできます。カスタマイズは、スクリプト・ファイルと、特定のフック・ポイントに対してトリガーするスクリプト・コードに依存します。

次の表は、フック・ポイントおよびフック・ポイントがOracle JETツールの作成、ビルド、提供およびリストア・プロセスでサポートしているワークフローのカスタマイズを示しています。特に記載がないかぎり、ビルドおよび提供プロセスのフック・ポイントはデバッグ・モードとリリース・モードの両方をサポートします。

フック・ポイント サポートされるツール・プロセス 説明

after_app_create

作成

このフック・ポイントは、ツールによってアプリケーション作成プロセスが終結された直後に、デフォルト名after_app_create.jsのスクリプトをトリガーします。

after_app_restore

リストア

このフック・ポイントは、ツールによってアプリケーション・リストア・プロセスが終結された直後に、デフォルト名after_app_restore.jsのスクリプトをトリガーします。

before_build

ビルド

このフック・ポイントは、ツールによってビルド・プロセスが開始される直前に、デフォルト名before_build.jsのスクリプトをトリガーします。

before_release_build

ビルド(リリース・モードのみ)

このフック・ポイントは、縮小化ステップとRequirejsのバンドル・ステップが発生する前に、デフォルト名before_release_build.jsのスクリプトをトリガーします。

before_app_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、アプリケーションがトランスパイルされる前に、デフォルト名before_app_typescript.jsのスクリプトをトリガーします。このフックを使用して、アプリケーションのtsconfig.jsonコンパイラ構成ファイルで定義されるTypeScriptコンパイラ・オプションを更新、追加または削除します。フック・システムは、変更済のtsconfigオブジェクトへの参照をTypeScriptコンパイラに渡します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

after_app_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、before_app_typescriptフック・ポイントの実行直後にデフォルト名after_app_typescript.jsのスクリプトをトリガーします。このフックは、生成された.jsx出力のbabelを使用したコンパイルなど、さらに処理が必要なアプリケーションのエントリ・ポイントを提供します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

before_component_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、コンポーネントがトランスパイルされる前に、デフォルト名before_component_typescript.jsのスクリプトをトリガーします。このフックを使用して、アプリケーションのtsconfig.jsonコンパイラ構成ファイルで定義されるTypeScriptコンパイラ・オプションを更新、追加または削除します。フック・システムは、変更済のtsconfigオブジェクトへの参照をTypeScriptコンパイラに渡します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

after_component_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、before_component_typescriptフック・ポイントの実行直後にデフォルト名after_component_typescript.jsのスクリプトをトリガーします。このフックは、生成された.jsx出力のbabelを使用したコンパイルなど、さらに処理が必要なアプリケーションのエントリ・ポイントを提供します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

before_injection

ビルド/提供

このフック・ポイントは、ツールによってビルド前のプロセスが終結された後で、CSSテーマをアプリケーションに挿入するタスクが実行される前に、デフォルト名before_injection.jsのスクリプトをトリガーします。つまり、このフック・ポイントは、ビルドのmain.js/index.html/themeインジェクション・プロセスをカスタマイズするためのエントリ・ポイントを提供します。

before_optimize

ビルド/提供(リリース・モードのみ)

このフック・ポイントは、リリース・モードのビルド/提供プロセスによってコンテンツが縮小される前に、デフォルト名before_optimize.jsのスクリプトをトリガーします。

before_component_optimize

ビルド/提供

このフック・ポイントは、ビルド/提供プロセスによってコンテンツが縮小される前に、デフォルト名before_component_optimize.jsのスクリプトをトリガーします。このフック・ポイントのスクリプトを使用して、特にWebコンポーネントを定義するプロジェクトのビルド・プロセスを変更できます。

after_build

ビルド

このフック・ポイントは、ツールによってビルド・プロセスが終結された直後に、デフォルト名after_build.jsのスクリプトをトリガーします。

after_component_create

ビルド

このフック・ポイントは、ツールによってWebコンポーネント作成プロセスが終結された直後に、デフォルト名after_component_create.jsのスクリプトをトリガーします。このフック・ポイントのスクリプトを使用して、特にWebコンポーネントを定義するプロジェクトのビルド・プロセスを変更できます。

after_component_build

ビルド(デバッグ・モードのみ)

このフック・ポイントは、ツールによってWebコンポーネントのビルド・プロセスが終結された直後に、デフォルト名after_component_build.jsのスクリプトをトリガーします。このフック・ポイントのスクリプトを使用して、特にWebコンポーネントを定義するプロジェクトのビルド・プロセスを変更できます。

before_serve

提供

このフック・ポイントは、Web提供プロセスがアプリケーションに接続して監視する前に、デフォルト名before_serve.jsのスクリプトをトリガーします。

after_serve

提供

このフック・ポイントは、すべてのビルド・プロセス・ステップが完了し、ツールによってアプリケーションが提供された後に、デフォルト名after_serve.jsのスクリプトをトリガーします。

before_watch

提供

このフック・ポイントは、ツールがアプリケーションを提供した後で、ツールがアプリケーションの変更を監視し始める前に、デフォルト名before_watch.jsのスクリプトをトリガーします。

after_watch

提供

このフック・ポイントは、ツールが監視を始めて、アプリケーションの変更を検出した後で、デフォルト名after_watch.jsのスクリプトをトリガーします。

after_component_package package このフック・ポイントは、ツールによってコンポーネントのパッケージ化プロセスが終結された直後に、デフォルト名after_component_package.jsのスクリプトをトリガーします。
before_component_package package このフック・ポイントは、ツールによってコンポーネントのパッケージ化プロセスが開始される直前に、デフォルト名before_component_package.jsのスクリプトをトリガーします。

スクリプト・フック・ポイントのプロセス・フローについて

Oracle JETのフック・システムでは様々なスクリプト・トリガー・ポイント(フック・ポイントとも呼ばれる)が定義されており、これを使用して各種コマンドライン・インタフェース・プロセスでの作成、ビルド、提供およびリストア・ワークフローをカスタマイズできます。

次の図は、作成プロセスのスクリプト・フック・ポイント・フローを示しています。


この図は、アプリケーションおよびコンポーネントの作成プロセスのフック・ポイントを示しています

次の図は、ビルド・プロセスのスクリプト・フック・ポイント・フローを示しています。


この図は、アプリケーションおよびコンポーネントのビルド・プロセスのフック・ポイントを示しています。

次の図は、提供およびリストア・プロセスのスクリプト・フック・ポイント・フローを示しています。


この図は、アプリケーションおよびコンポーネントの提供およびリストア・プロセスのフック・ポイントを示しています。

hooksサブフォルダの場所の変更

アプリケーションの作成時、Oracle JETツールによって/scripts/hooksアプリケーション・サブフォルダにスクリプト・テンプレートが生成されます。開発作業では、たとえば、チーム開発に対応する場合など、フック・スクリプトを共通の場所に再配置することが必要になる場合があります。

デフォルトでは、スクリプト・パスが指定されている生成済のJSONファイル(hooks.json)を使用して、フック・システムがhooksサブフォルダ内のスクリプトを検索します。ツールがフック・ポイントに到達すると、hooks.jsonファイルを使用して検出された対応するスクリプトが実行されます。フック・スクリプトを共通の場所に再配置する場合は、次の例に示すように、hooks.jsonファイルを編集して、再配置したフック・スクリプトの新しい場所を指定する必要があります。 

{
    "description": "OJET-CLI hooks configuration file",
    "hooks": {
        "after_app_create": "scripts/hooks/after_app_create.js",
	...
        "after_serve": "http://example.com/cdn/common/scripts/hooks/after_serve.js "
    }
}

Webアプリケーションのフック・スクリプトの作成

フック・ポイント・スクリプトを作成して、Webアプリケーションの新しいコマンドライン・インタフェース・プロセス・ステップを定義できます。フック・スクリプトを作成するには、ツールのビルドおよび提供ワークフローで特定のフック・ポイントに関連付けられたフック・スクリプト・テンプレートを編集します。

Oracle JETのフック・システムでは様々なスクリプト・トリガー・ポイント(フック・ポイントとも呼ばれる)が定義されており、これを使用して各種ビルド・モードと提供モードでのビルドおよび提供ワークフローをカスタマイズできます。カスタマイズは、スクリプト・ファイルと、特定のフック・ポイントに対してトリガーするスクリプト・コードに依存します。スクリプト・コードを使用して変更する生成済のスクリプト・テンプレートには、対応するフック・ポイントの名前が付いています。

ビルド・プロセスまたは提供プロセスのワークフローをカスタマイズするには、特定のフック・ポイントの名前が付いた生成済のスクリプト・テンプレートを編集します。たとえば、ツールのビルド・プロセスの開始時にスクリプトをトリガーするには、ビルドが開始される前にトリガーされるフック・ポイントの名前が付いたbefore_build.jsスクリプトを編集します。そのフックポイントの名前はbefore_buildです。

基本的な例は、before_optimizeフックを使用した単純なカスタマイズを示しており、これにより、太字で表示されたRequireJSプロパティを制御して、アプリケーションのバンドル構成を変更できます。 

requirejs.config(
{
  baseUrl: "web/js",
  name: "main-temp",
  paths: {
  // injector:mainReleasePaths
    "knockout":"libs/knockout/knockout-3.x.x.debug",
    "jquery":"libs/jquery/jquery-3.x.x",
    "jqueryui-amd":"libs/jquery/jqueryui-amd-1.x.x",
     ...
  }
  // endinjector
  out: "web/main.js"
}
...

このフック・ポイントのスクリプトでは、次に示すようにbefore_optimizeスクリプト・テンプレートに1行追加できます。このカスタマイズ・スクリプト・ファイルを使用してデフォルトの場所にアプリケーションをビルドすると、ツールによって、requirejs.out()をコールする前にスクリプトがトリガーされ、outプロパティ設定がカスタム・ディレクトリ・パスに変更されます。その結果、アプリケーション生成のmain.jsは、デフォルトのweb/js/main.jsの場所ではなく、指定されたディレクトリに作成されます。 

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running before_optimize hook.");
    configObj.requirejs.out = 'myweb/js/main.js';
    resolve(configObj);
  });
};

パラメータとして多くのスクリプト・フック・ポイントに渡されるconfigObjの定義に関する詳細情報を取得するには、ビルド関連のフック・ポイントのいずれかで次の変更を行い、ojet buildを実行します。たとえば、before_build.jsフック・ポイントは次のように変更できます: 

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
  	console.log("Running before_build hook.", configObj);
  	resolve(configObj);
   });
};

ojet buildコマンドを実行するコンソールには、configObjでカスタマイズできる使用可能なオプションが表示されます。 

Cleaning staging path.
Running before_build hook {
  buildType: 'dev',
  opts: {
    stagingPath: 'web',
    injectPaths: {
      startTag: '// injector:mainReleasePaths',
. . .

他の場所で、configObjを使用してフック・ポイントをカスタマイズする方法を示した例を参照してください。たとえば、すぐに使用できるojet serveオプションが要件を満たしていない場合は、Express構成オプションを追加したり、before_serve.jsフック・ポイントにExpressミドルウェア関数を記述します。「自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理」を参照してください。

ヒント:

アプリケーション・パス・マッピングを変更する場合は、常にpath_mappings.jsonファイルを編集することをお薦めします。例外は、アプリケーションのランタイム・パス・マッピングをバンドル・プロセスで使用されるマッピングとは異なるものにする場合で、before_optimizeフック・スクリプトを使用してrequirejs.configのpathsプロパティを変更できます。

次の例は、after_buildフックを使用したより複雑なビルドのカスタマイズを示しています。このフック・スクリプトは、ビルド完了後のカスタマイズ・タスクを追加します。 

'use strict’;

const fs = require('fs');
const archiver = require('archiver');

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
   console.log("Running after_build hook.");

    //Set up the archive
    const output = fs.createWriteStream('my-archive.war');
    const archive = archiver('zip');

    //Callbacks for the archiver
    output.on('close', () => {
      console.log('Files were successfully archived.');
      resolve();
    });
  
    archive.on('warning', (error) => {
      console.warn(error);
    });
  
    archive.on('error', (error) => {
      reject(error);
    });
  
    //Archive the web folder and close the file
    archive.pipe(output);
    archive.directory('web', false);
    archive.finalize();
  });
};

この例では、アプリケーションの作成時に生成されたデフォルト・フォルダ内にスクリプト・テンプレートが存在することを想定しています。アプリケーションをZIPファイルにパッケージ化することが目的です。パッケージ化はアプリケーションのビルド・プロセスが完了した後で発生するため、このスクリプトはafter_buildフック・ポイントに対してトリガーされます。このフック・ポイントに対して、変更済のスクリプト・テンプレートafter_build.jsにアプリケーションをZIP形式で圧縮するスクリプト・コードが挿入され、また、.jsファイルはデフォルトの場所にあるため、フック・システムの構成を変更する必要はありません。

ヒント:

Oracle JETツールでは、フック・ポイントが実行された時間をビルドおよび提供プロセスのメッセージ・ログに報告します。コンソールでこのログを調べると、ツールのワークフローを把握して、フック・ポイント・スクリプトがトリガーされるタイミングを正確に測ることができます。

Webアプリケーションのフック・スクリプトへの引数の引渡し

Webアプリケーションのビルドまたは提供時に、コマンドライン・インタフェースからフック・スクリプトに追加の値を渡すことができます。作成したフック・スクリプトはこれらの値を使用して、webフォルダのコンテンツからアーカイブ・ファイルを作成するなどのワークフロー・アクションを実行できます。

Oracle JETのコマンドライン・インタフェースに--user-optionsフラグを追加して、Webアプリケーションのビルドまたは提供時にフック・システムに対してユーザー入力を定義できます。--user-optionsフラグは、buildまたはserveコマンドに追加して、次のように空白で区切られた1つ以上の文字列値を引数として使用できます。
ojet build --user-options="some string1" "some string2" "some stringx"
たとえば、ビルドの終了後にビルド出力のコピーをアーカイブするフック・スクリプトを記述できます。開発者は、Oracle JETコマンドラインで--user-optionsフラグを使用して、アーカイブ・ファイル名に設定されているユーザー定義パラメータarchive-fileを渡すことができます。
ojet build web --user-options="archive-file=deploy.zip"
フラグが追加され、適切な入力が渡されると、フック・スクリプト・コードは、プロジェクトのルートの/deployディレクトリにZIPファイルを書き込むことができます。次の例は、after_buildフックを使用したこのビルドのカスタマイズを示しています。このスクリプト・コードでは、NodeJS関数のfs.createWriteStream()をコールして、ビルドの終了後にアプリケーションを確実にアーカイブするため、ユーザー定義のarchive-fileフラグの値に対するユーザー入力を解析します。このフック・スクリプトの例では、コマンドライン・インタフェースからユーザー入力を行い、それを処理してビルド・ワークフローのカスタマイズを行います。 
'use strict';
const fs = require('fs');
const archiver = require('archiver');
const path = require('path');

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running after_build hook.");

    //Check to see if the user set the flag 
    //In this case we're only expecting one possible user defined
    //argument so the parsing can be simple
    const options = configObj.userOptions;
    if (options){
      const userArgs = options.split('=');
      if (userArgs.length > 1 && userArgs[0] === 'archive-file'){
        const deployRoot = 'deploy';
        const outputArchive = path.join(deployRoot,userArgs[1]);

        //Ensure the output folder exists
        if (!fs.existsSync(deployRoot)) {
          fs.mkdirSync(deployRoot);
        }

        //Set up the archive
        const output = fs.createWriteStream(outputArchive);
        const archive = archiver('zip');

        //callbacks for the archiver
        output.on('close', () => {
          console.log(`Archive file ${outputArchive} successfully created.`);
          resolve();
        });

        archive.on('error', (error) => {
          console.error(`Error creating archive ${outputArchive}`);
          reject(error);
        });

        //Archive the web folder and close the file
        archive.pipe(output);
        archive.directory('web', false);
        archive.finalize();
      }
      else {
        //Unexpected input - fail with information message
        reject(`Unexpected flags in user-options: ${options}`);
      }
    }
    else {
  	//nothing to do
  	resolve();
    }
  });
};

Oracle JETアプリケーション開発でのWebpackの使用

Webpackを使用して、Oracle JETアプリケーションおよびビルド・タスクとサービス・タスクを管理できます。

Webpackを使用する場合、Oracle JETは、Oracle JETプロジェクトのソース・ファイルをビルドして提供する責任をWebpackに渡します。Webpackの使用を決定する前に、Webコンポーネントのビルド、パッケージ化または公開が必要なOracle JETアプリケーションでWebpackを使用したり、Oracle JETのコンポーネントWebElements UI自動化ライブラリ(TestAdapters)を使用してアプリケーションをテストしたりすることはできません。

Oracle JETアプリケーションでWebpackを使用する場合、次のコマンド例に示すように、プロジェクトのスキャフォールド時にコマンドライン引数として指定できます:

ojet create <app-name> --template=basic --vdom --webpack

Webpackを使用してアプリケーションをビルドおよび提供するには、それぞれojet buildおよびojet serveを実行するのみです。ojet serve --releaseコマンドは使用できません。ローカル開発環境からリリース・ビルドを実行するには、ojet build --releaseコマンドを使用して、/webフォルダから任意の静的サーバー(http-serverなど)を使用します。

Webpackを既存のOracle JETアプリケーションに追加するには、Oracle JETプロジェクトのルート・ディレクトリから次のコマンドを実行します:

ojet add webpack

Webpackを使用するOracle JETプロジェクトのファイルおよびディレクトリは、--webpack引数を指定せずに生成されたアプリケーションのプロジェクトとは異なります。次の表に、--webpack 引数を使用した場合の違いを示します。

オプション 説明

/types

 typesディレクトリには、カスタム要素タグ名を既知のJSX固有の要素のリストに追加するためのスタブを含む/types/components/index.d.tsファイルが含まれています。これは、preact.JSX.IntrinsicElements型定義がないJSX内でカスタム要素を使用する予定の場合に重要です。/typesには、コンパイル後にJavaScriptファイルを生成しない型定義のみを含める必要があります。フォルダの名前を変更する場合は、tsconfig.jsonファイルのtypeRootsオプション下のフォルダへの参照も必ず更新してください。

ojet.config.js

このファイルは、Oracle JETのデフォルトのWebpack構成を管理します。このファイルとその構成方法の詳細は、「Oracle JETのデフォルトWebpack構成の構成」を参照してください。

tsconfig.json

Webpackを使用せずにアプリケーションに対して生成されたtsconfig.jsonと対照的に、esModuleInteropおよびresolveJsonModuleフラグはtrueに設定されます。esModuleInteropフラグにより、アプリケーションはすべてのモジュール・タイプのデフォルト・インポートを標準化できます。import * as <importName> from "path/to/import"などのコールは、import <importName> from "path/to/import"と記述する必要があります。resolveJsonModuleフラグにより、アプリケーションはJSONファイルを直接インポートできます。JSONファイルのインポートを解決するためのWebpackの自動サポートと組み合せることで、Oracle JETアプリケーションでJSONファイルを消費するために、RequireJs text!プラグインの後にJSON.parseを使用する必要がありません。

このトピックの冒頭で述べたように、Webコンポーネントをビルド、パッケージ化または公開するOracle JETプロジェクト、またはJETテーマを使用する必要があるプロジェクトでWebpackを使用することはできません。つまり、Oracle JET CLIから次のコマンドを使用できないということです:

  • ojet build (component|pack)
  • ojet package (component|pack)
  • ojet publish (component|pack)

もう1つの注意点は、開発モード(デフォルト)でOracle JETアプリケーションを提供すると、Oracle JETアプリケーションはメモリーからスタイルをロードし、ブラウザのHTMLの<styles>タグにスタイルが表示されることです。一方、リリース・モードでビルド(ojet build --release)したOracle JETアプリケーションを提供する場合、スタイルはHTMLファイルに含まれるCSSファイル・リンクから取得されます。次のイメージでは、ブラウザの開発者ツールを使用して、開発モードで実行されるOracle JETアプリケーション・インスタンスとリリース・モード・インスタンスで異なるエントリを確認できます。


開発およびリリース・モードのCSS参照

Oracle JETのデフォルトWebpack構成の構成

Oracle JET CLIによって生成されるデフォルトのWebpack構成は、ojet.config.jsファイルのwebpack関数を使用して構成できます。

webpack関数は、Oracle JETビルド・コンテキスト(context)およびWebpack構成(config)を持つオブジェクトを受け取ります。Webpackを開発モードとリリース・モードのどちらで実行するかを示すbuildTypeプロパティに注意してください。Oracle JETによって生成されるデフォルトのWebpack構成であるconfigについては、必要に応じてカスタマイズできます。

ojet.config.jsファイルのデフォルト・オプションを表示するには、次の例に示すように、コンソール・ログ文をojet.config.jsファイルに追加します。 

. . .
webpack: ({ context, config }) => {
  if (context.buildType === "release") {
    // update config with release / production options
  } else {
    // Print out the default webpack configuration options 
    // as a JSON string
    console.log(JSON.stringify(config));
    // Or let your terminal console determine how to 
    // present the configuration
    console.log(config);
  }
. . .

さらに、次のコマンドを使用してOracle JETプロジェクトを作成し、ターミナル・コンソールでデフォルト構成をレンダリングします:

ojet build

ヒント:

Visual Studio CodeでJSON形式のファイルを作成し、端末から返された構成に対して、より読みやすい形式でデフォルト構成を表示します。

開発モードで構築されたOracle JETアプリケーションのデフォルトのWebpack構成には、次のトップレベル・ノードが含まれます。

{
  "entry": { },
  "output": { },
  "module": {},
  "resolve": {},
  "resolveLoader": {    },
  "plugins": [],
  "mode": "development",
  "devServer": { }
}

変更するOracle JETのデフォルトWebpack構成の構成設定を特定したら、ojet.config.jsファイルに代替値を追加します。次の例は、Webpackを使用して開発モードでOracle JETアプリケーションを提供する場合にポート番号を変更する方法を示しています。 

module.exports = {

  webpack: ({ context, config }) => {
    if (context.buildType === 'release') {
      // update config with release / production options
    } else {

      // update config with development options. In the following example, we specify
      // a different server port number to the default of 8000
      config.devServer.port = 3000;
	
     // Print out the default webpack configuration options as a JSON string
     console.log(JSON.stringify(config));
     // Or let your terminal console determine how to present the configuration
     console.log(config);
    }
    return config;
  }
};