Help us understand the problem. What is going on with this article?

enebular の InfoType を ES2015 で書く

More than 1 year has passed since last update.

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

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 リファレンスを。

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 ライフを。

iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away