es6
babel
es2015
enebular
infotype

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