babelのAPIを使ってtransformを色々試してみる。

17253 ワード
transform babel JavaScript Node.js JavaScript テキストリンク

この記事は？

実用的ではないのですが、
babelを色々試す過程で、babelのtransformなどのAPIを使ってコード変換を書いてみたので、勉強ログとして残しておきます。
なお、変換するコード自体はES2015以前の書き方で書いています。

実装した内容について

実装した機能はES2015で書かれたinput.jsを変換してoutput.jsにするというもの。

このコード(input.js)が、

const hello = (str) => {
  console.log("Hello ", str);
}

hello("world");

このように変換されます。
(output.js)

"use strict";

var hello = function hello(str) {
  console.log("Hello ", str);
};

hello("world");

依存関係

package.json内の依存関係は下記のとおりです。


  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  }

babel.transformを使用したコード変換

const babel = require('babel-core');
const fs = require('fs');

const CHAR_CODE = 'utf-8';

const options = {"presets": ["env"]}

const inputFile = './input.js'
const outputFile = './output.js'

function readFile(path) {
  return fs.readFileSync(path, CHAR_CODE);
}

function compile(input, output) {
  const code = readFile(input);
  const newCode = babel.transform(code, options).code
  fs.writeFileSync(output, newCode);
  console.log("*** compile success!! ***");
  console.log(input, "----->", output)
}

compile(inputFile, outputFile)

babel.transformFileを使用したコード変換

const babel = require('babel-core')
const fs = require('fs')

const options = {"presets": ["env"]}

const inputFile = './input.js'
const outputFile = './output.js'

function compile(inputFile, outputFile) {
  babel.transformFile(inputFile,options, function(err, result) {
    fs.writeFileSync(outputFile, result.code);
    console.log("*** compile success!! ***");
    console.log(inputFile, "----->", outputFile)
  });
}

compile(inputFile, outputFile)

babel.transformFileSyncを使用したコード変換

const babel = require('babel-core')
const fs = require('fs')

const options = {"presets": ["env"]}

const inputFile = './input.js'
const outputFile = './output.js'

function compile(intputFile, outputFile) {
  fs.writeFileSync(outputFile, babel.transformFileSync(inputFile, options).code)
  console.log("*** compile success!! ***");
  console.log(inputFile, "----->", outputFile)
}

compile(inputFile, outputFile);

babel.transformFromAstを使用したコード変換

const fs = require('fs')
const babylon = require('babylon')
const babel = require('babel-core')

const CHAR_CODE = "utf-8";

const inputFile = "./input.js";
const outputFile = "./output.js";
const options = {"presets": ["env"]}

function readFile(path) {
  return fs.readFileSync(path, CHAR_CODE);
}

function compile(inputFile, outputFile) {
  const code = readFile(inputFile);
  const ast = babylon.parse(code);
  const newCode = babel.transformFromAst(ast, code, options).code;
  fs.writeFileSync(outputFile, newCode)
  console.log("*** compile success!! ***");
  console.log(inputFile, "----->", outputFile)
}

compile(inputFile, outputFile);

以上です。
普段何も考えずに使っているbabelのコード変換ですが、こうやってちょっとした処理を自分で書いてみると少しだけ身近になったような気分になりますね。

参照

Babel - API

第三週プロジェクト張三李四年齢問題
SpringCloud Aliba(3):Sentine流量制御ユニット