enebular の InfoType を ES2015 で書く

InfoType の作成にチャレンジしようと、下記ドキュメントを参考に、infomotion-tool を実行してみました。

• Creating an InfoType
  
  https://docs.enebular.com/ja/infomotion/infomotiontool

ES5 のテンプレート

出力された plugin.js には、下記のような、古き良き prototype を使用したクラス宣言が書かれています。

plugin.js

function DataLogger(settings, options) {
  :
}
DataLogger.prototype.addData = function(data) {
  :
}

DataLogger.prototype.render = function() {
  :
}

DataLogger.prototype.clearData = function() {
  :
}

DataLogger.prototype.resize = function(options) {
  :
}

DataLogger.prototype.getEl = function() {
  :
}

/*
 * Register to use in infomotion
**/
EnebularIntelligence.register('Data-Logger', DataLogger);

module.exports = DataLogger;

それぞれのメソッドの意味は、下記公式 API リファレンスを。

• API Reference
  
  https://docs.enebular.com/ja/infomotion/APIReference.html

ES2015 のテンプレート

長いものには巻かれる派なので、これを ES2015 のクラス構文に直しました。
必要なメソッドは決まっているので、そう難しくはないですね。

plugin.js

export default class DataLogger {
  constructor(settings, options) {
    :
  }
  addData(data) {
    :
  }

  clearData() {
    :
  }

  resize(options) {
    :
  }

  getEl() {
    :
  }
}

/*
 * Register to use in infomotion
**/
EnebularIntelligence.register('Data-Logger', DataLogger);

しかし、上の ES2015 構文のままだと eit package コマンドが通りません。

パッケージング失敗

$ eit package .

${plugin_dir}/plugin.js
export default class DataLogger {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

なので、babel でトランスパイルします。

Babel の導入

まず必要なツールをインストールします。

babelの導入

$ npm i @babel/core @babel/cli @babel/preset-env --save-dev

.babelrc も作ります。

.babelrc

{
  "presets": ["@babel/preset-env"]
}

plugin.js という名称のファイルは、eit package の実行時に ES5 構文で書いてある必要があります、
なので、ES2015 構文のファイルを plugin.es にリネームし、以降はこの plugin.es を編集します。

mv plugin.js plugin.es

結果、ファイル構成はこのようになります。

ファイル構成

$ tree -a --dirsfirst -L 1
${plugin_dir}
├── node_modules
├── .babelrc
├── datasource.json
├── package.json
├── package-lock.json
├── plugin.css
├── plugin.es
├── plugin.json
└── README.md

babel によるトランスパイルと eit のパッケージングをまとめてやってしまいたいので、npm で実行するスクリプトに下記のコマンドを追記します。

package.json/scripts

  "scripts": {
    "build": "babel plugin.es -o plugin.js && eit package .",
    :
  },

今後は、plugin.es を編集したら、トランスパイルとパッケージングを npm run build で一気に実行できます。

おまけ

ちなみに、eit create 実行時にテンプレートを指定した際に記載される d3 の require は、import 構文に置き換えられます。

require_d3

var d3 = require('d3');

Import_d3

import * as d3 from 'd3';

それでは、よき enebular & ES201x ライフを。