Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

enebular の InfoType を ES2015 で書く

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

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
0
Help us understand the problem. What are the problem?