はじめに
npmによるWijmoの参照
5.20241.9
5.20241.9

npmによるWijmoの参照

インストール

npmではWijmoは@mesciusスコープ内のwijmo.*パッケージのセットで表されます。@mescius/wijmo.allはライブラリのすべてのパッケージを表します。 他のnpmパッケージと同様に、使用するにはNodeJSがコンピュータにインストールされている必要があります。

コマンドラインから次のコマンドを実行すると、Wijmoの最新のリリース版をnpmからインストールできます。

npm install @mescius/wijmo.all

@の後ろに製品バージョンを指定すると、特定のバージョンをインストールできます。

npm install @mescius/wijmo.all@5.20191.xxx

リリース版に加えて、RC版（リリース候補版）とナイトリー版も公開しています。RC版とナイトリー版はテスト専用であり、本番環境では使用しないでください。

最新のRC版をインストールするには、次のコマンドを使います。

npm install @mescius/wijmo.all@rc

最新のナイトリー版をインストールするには、次のコマンドを使います。

npm install @mescius/wijmo.all@nightly

なお、RC版とナイトリー版は@mesciusスコープでのみ公開されます。

パッケージグループをインストールする

通常、アプリケーションにはWijmoパッケージの特定のサブセットのみが必要です。これは、使用するフレームワークの有無と使用方法によって異なります。 Wijmoはこの作業を容易にする特別なグループパッケージ（wijmo.*.all）を提供しています。グループパッケージにはコードが含まれておらず、パッケージ依存関係のみが指定され、npmまたはyarnでグループに関連する実際のパッケージをインストールできます。

コアとなるPure JavaScript（フレームワークを含まない）パッケージのみをインストールするには、このコマンドを使用します。

npm install @mescius/wijmo.purejs.all

特定のフレームワーク用のパッケージをコアPure JavaScriptパッケージと一緒にインストールするには、次のコマンドを使用します。

npm install @mescius/wijmo.{framework}.all

{framework}は、angular2、react、vue2、webcomponents、angular、knockoutのいずれかの値を取ります。 たとえば、このコマンドはPure JavaScriptパッケージと一緒に Angular パッケージをインストールします。

npm install @mescius/wijmo.angular2.all

特定のパッケージをインストールする

特定のWijmoパッケージをインストールすることもできます。このパッケージが依存するすべてのパッケージは自動的にインストールされます。 たとえば、アプリケーションにwijmo.gridパッケージしか必要ない場合は、次のコマンドを使用してインストールできます。

npm install @mescius/wijmo.grid

次の wijmo.grid 依存パッケージは自動的にインストールされます。

  • @mescius/wijmo.input
  • @mescius/wijmo
  • @mescius/wijmo.styles

スタイルをインストールする

WijmosのCSSスタイル、テーマ、SCSSのファイルは、@mescius/wijmo.stylesパッケージに含まれます。 最も基本的な@mescius/wijmoパッケージはstylesパッケージへの依存を宣言しているので、通常はこのパッケージを明示的にインストールする必要はなく、他のWijmoパッケージと一緒に自動的にインストールされます。

カルチャーをインストールする

言語／国固有の書式記述子とUI文字列を含むカルチャーファイルは、独立した@mescius/wijmo.culturesパッケージに含まれます。このコマンドを使用してインストールすることができます。

npm install @mescius/wijmo.cultures

アプリケーションにWijmoを追加する

JavaScriptモジュールを追加する

すべてのWijmoパッケージには、複数の形式（ES5／ES2015言語とCommonJS／ESMモジュール形式の組み合わせ）のJavaScriptファイルが含まれています。package.jsonのmainフィールドでは、既定の形式としてES5＋CommonJSファイルを参照します。WebpackバンドラーやSystemJSランタイムモジュールローダーなどのツールと一緒にそれらのモジュールを使うことができます。

TypeScriptまたはBabelで開発されたアプリケーションにWijmoモジュールをインポートするには、ES2015のimport文を使用できます。 import文のモジュール名はすべて@mescius/プレフィックスで始まり、その後にモジュール名が続きます。たとえば、次のコードはwijmo.gridモジュールをインポートしてFlexGridコントロールのインスタンスを作成します。

import * as wjcGrid from '@mescius/wijmo.grid';
let grid = new wjcGrid.FlexGrid('#hostElement');

ES5でコードを書く場合は、CommonJSのrequire()関数を使用してモジュールをインポートできます。

var wjcGrid = require('grapecity/wijmo.grid');
var grid = new wjcGrid.FlexGrid('#hostElement');

スタイルを追加する

コントロールを画面に正しく表示するには、Wijmo CSSスタイルファイルへの参照を追加する必要があります。 HTMLページにlinkタグを追加することも可能です。

<link href="node_modules/@mescius/wijmo.styles/wijmo.css" rel="stylesheet" />

または、次のようにES2015のimport文を記述します。

import '@mescius/wijmo.styles/wijmo.css';

または、相対パスで指定します。

import './node_modules/@mescius/wijmo.styles/wijmo.css';

import文で指定されたパスの実際の形式は、アプリケーションで使用されているバンドラー／モジュールローダーと、その設定内容によって異なります。 SPAアプリケーションの場合は、アプリケーションのルートモジュールのどこかに、CSSファイルを1回だけインポートするだけで十分です。

同様に、次のようにテーマファイルをインポートすることができます。

import '@mescius/wijmo.styles/themes/wijmo.theme.cerulean.css';

テーマファイルをインポートする場合は、wijmo.cssスタイルファイルをインポートする必要はありません。機能的には、これを両方ともインポートしても間違いではありません。

カルチャーを追加する

次のようなimportステートメントを使用して@mescius/wijmo.culturesパッケージから特定のカルチャーファイルを適用できます。

import '@mescius/wijmo.cultures/wijmo.culture.ja';

一般的なフレームワークでWijmoを使用する

Angular CLI、create-react-app、Vue CLIなどの一般的な開発ツールでWijmo npmモジュールを使用する方法については、Wijmoクイックスタートのブログ記事を参照してください。

2018J v3以前の旧バージョンからの移行方法

Wijmo 2019J v1では、npmパッケージの仕様が変更されました。そのため、2018J v3以前のバージョンから2019J v1以降のバージョンに移行するには、次の手順を行う必要があります。

  1. 旧バージョンのnpmパッケージをアンインストールします。

    npm uninstall wijmo

  2. 新バージョンのnpmパッケージをインストールし直します。

    npm install @mescius/wijmo.xxx.all

  3. import文のモジュール名を次のルールに従って置換します。

    • wijmo/wijmo → @mescius/wijmo
    • wijmo/styles → @mescius/wijmo.styles
    • wijmo/cultures → @mescius/wijmo.cultures

2019J v1以降の旧バージョンからの移行方法

Wijmo 2019J v1以降のバージョンから新バージョンへ移行するには、次の手順を行います。

  1. npm updateコマンドを実行します。

    npm update

  2. npm updateコマンドで最新版へアップデートできない場合は、次のコマンドで最新版をインストールし直します。

    npm install @mescius/wijmo.xxx.all@latest

  3. 特定のバージョンへアップデートする場合は、次のコマンドで特定のバージョンをインストールし直します。

    npm install @mescius/wijmo.xxx.all@バージョン番号