はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > Babel > language-babelを使ってAtomでBabel

language-babelを使ってAtomでBabel

Babel JavaScript Atom Node.js

language-babelを使ってAtomでBabel

AtomでES6,ES7からES5に自動トランスパイル（transpile）する環境を作る．

参考記事： medium.com

環境

  • Windows10
    • Atom 1.34.0
    • npm 6.4.1

前提

Atomエディタ，Node.jsはインストールされている前提で進める．

language-babelの注意点としては， このパッケージが担当する処理はbabel-cliに該当する部分だけなので，トランスパイルに必要なプリセットなどのファイルは通常通りnpmでインストールする必要がある．

実際にBabelを試した記事はこちら

cartman0.hatenablog.com

language-babelのインストール

パッケージlanguage-babelをインストールする．

atom.io

language-babel

トランスパイル後のコードを見たい場合， パッケージsource-previewを入れておくと便利．

対応ファイル

  • .js
  • .babel
  • .jsx
  • .es
  • .es6
  • .mjs
  • .flow

一応自動検出されるが,Atomで認識するファイルの種類を[Babel ES6 JavaScirpt]にしないと処理が働かないので注意．

ファイルの種類を[Babel ES6 JavaScirpt]に

設定

設定方法は2種類ある．

  • エディタ側で[Settings > Package > language-babel > Settings]の設定：基本的にこの設定が有効になる．
  • .languagebabel(json)ファイルを作る：このファイルがあるとエディタ側でなくこちらの設定が優先される．

.languagebabelファイルは，babel.config.jsや.babelrcの設定とは別物で異なるので注意．

.languagebabelファイルの設定例：

{
 "babelMapsPath": "",
 "babelMapsAddUrl": false,
 "babelSourcePath": "",
 "babelTranspilePath": "",
 "createMap": false,
 "createTargetDirectories": false,
 "createTranspiledCode": true,
 "disableWhenNoBabelrcFileInPath": true,
 "suppressSourcePathMessages": false,
 "suppressTranspileOnSaveMessages": false,
 "transpileOnSave": true
}

"transpileOnSave": true にすると，ファイルを保存した時に自動でtranspileしてくれる．

事前準備

トランスパイルに必要なファイルはインストールしておく必要がある.

cd myproject

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

なお，language-babelパッケージでは@babel/cliを使ってないのでインストールしなくても動作する．

実行例

トランスパイル用のファイルがあり， "transpileOnSave"を有効にしておけば，自動でトランスパイルしてくれる．

sample code:

Promise.resolve().finally();

const a = 1;

(x, y)=>{
  return x + y;
}

実行例