作って理解する Babel プラグイン - Techtouch Developers Blog
エンジニアの伊藤です。 ようやく梅雨が開けたと思ったらすでに立秋。残暑は残るどころか日に日に増している感じさえあります… 🥵 。 この記事では、普段の開発で非常にお世話になっているツール Babel のプラグインを作成する方法と、Babel プラグインの例としての処理時間を計測するプロファイラを紹介します。Babel プラグインに踏み込んでいきたいのですが、理解を助けるためにまず Babel が何をするツールなのかから説明します。 Babelとは Babel の処理の流れ AST (Abstract Syntax Tree) Babel プラグイン Babel プラグイン プロジェクト最小構成 Hello World 「プロファイラ」で何をするのか まとめ Babel プラグイン開発に参考になったサイト おまけ Babelとは フロントエンドの開発を行っている方にはお馴染みな Babel
Babel7.x時代のpolyfillの設定方法とuseBuiltInsの仕組み
ES2015+で実装するためにBabelのpolyfillを利用する場面は多いと思いますが、Babel6.xまでと7.xではその導入方法が変わっているので注意が必要です。今回はBabel7.xでの用途別polyfillの設定方法と、キモとなるuseBuiltInsオプションの挙動についてまとめてみます(執筆時点でのBabelのバージョンは7.1.0です)。 なお、6.xまでの設定方法は「Babelの設定を見直すための逆引きガイド」にまとめてあります。polyfillのことだけでなく、Babelとは何か、どのように利用するのか、といったことも併せてまとめてありますので良ければご参考にどうぞ。 2019/06/21 追記 Babel7.4.0から @babel/polyfill が非推奨となっています。変更点や新しい設定方法は「Babel7.4で非推奨になったbabel/polyfillの代替
次のリリースであるBabel7の主な変更点まとめ - 技術探し
Babel7がリリースされるまでは更新されます。 注意: 量が多いので、BabelのInternal, Bug Fix, DocumentsとBabylonについては書きません。 また6.xへバックポートされたものも入っていますので注意してください。 もし、間違えや質問があれば、 @about_hiroppy までどうぞ;) Index Notable Changes Details of Changes In Progress Links Milestone Babel 7 Beta Milestone · GitHub Wiki Babel 7 · babel/babel Wiki · GitHub Releases Releases · babel/babel · GitHub Revision History of This Article 2017/09/04(first) Ba
Redux勉強用に簡単なサンプルを作ってみた - Qiita
前々から触りたいと思っていたReduxを遅ればせながら最近触りはじめたので、学んだことを自分用の備忘録としてまとめます。実装や説明について間違っているところがあれば修正します。 自分にとって解りやすいように公式ドキュメントでの Todoアプリ からかなり機能を削りとって、テキストの追加と全削除の機能しか持たない極端に小さいアプリケーションをReduxを使って作ります。 環境 Redux @3.0.5 React @0.14.3 react-redux @4.0.5 babelify @7.2.0 browserify @12.0.1 wachify @3.6.1 使用しているBabelプリセット babel-preset-es2015 @6.3.13 babel-preset-react @6.3.13 babel-preset-stage-2 @6.3.13 完成品 でき上がったものがこ
ES async/awaitを全力で使ってみて発見したイディオム - Qiita
// 注意: 最初のバージョン、async function がundefinedを返すと思い込んでて、色々間違えてた 手元の趣味コード(諸事情により未公開)に向けて全力で適用してみた結果学びがあった。以下babel。 事前に確認 async/await は Promise と Generator の糖衣構文である await は Promiseのインスタンスの式を与えると(見た目上)停止する await するには async functionで囲う必要がある async function は必ず非同期で実行され undefinedPromise を返す 以下イディオム とりあえず実行したい (async () => { await new Promise(done => { setTimeout(1000, done); }) })(); 解説: async ブロック作ってからの即時実行
Class Propertiesを使ったReactコンポーネントをESLintで静的検証 - Qiita
ある程度Babelとか知ってる人向きです。 要約 Class Property DeclarationsでReactのPropTypes指定が捗る ESLintそのままではClass Property Declarationsに対応してない babel-eslintパーサ使えば解決（ただしestraverse-fbは手動で入れろ） 以上。estraverse-fb周りはそのうち修正されそう。 Class Property DeclarationsでReactのPropTypes指定が捗る ES.nextのClass Property Declarationsでクラスにプロパティ生やせるよう提案されている。 それを使えばReactのpropTypes指定が捗るようになる。やったぜ。 import React from 'react'; export default class MyButto
React Routerで認証を制御する方法 - Qiita
React Routerで認証を制御する方法です。試行錯誤して良さそうな実装方法を発見したのでご紹介します。 アプリに認証があると、画面ごとに、 認証済みユーザのみアクセスを許可したいページ アカウント設定など 認証していないユーザのみアクセスを許可したいページ ログイン・新規登録など 認証に関係なくアクセスを許可したいページ Qiita投稿のようなパブリックなコンテンツなど の設定が必要になる場合があります。 React Routerのサンプルをいくつか見たところ幾つか認証を制御する方法が示されていました。 onEnterを使う方法 AuthenticatedComponent onEnterを使う方法 本家のサンプルで例示された実装です。現在βのreact-router 1.0.0が必要になります。 function requireAuth(nextState, transition)
Writing NPM packages with ES6 using the Babel 6 CLI
This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading to Babel 6, start with Six Things You Need To Know About Babel 6. Even if you write your NPM package with ES2015, it is important that the code you publish is compatible with everyone else’s JavaScript environments. That means compiling your code to ES5 before publishing it. And of course, the b
Node.js/ExpressでES6(ECMAScript 2015)を使用 | たんたか
babelでexpressを動かすまでの設定です。環境はWindows 10。 プロジェクトフォルダ作って移動 mkdir sample1 cd sample1 babelとexpress-generatorをインストール(今回は、グローバルにインストール) npm i -g babel-cli express-generator express のインストール express ES2015を使うので、babel-preset-es2015 もインストール npm i --save-dev babel-preset-es2015 必要なモジュールをインストール npm install babel-nodeを使用するように package.json を修正 "scripts": { "start": "babel-node ./bin/www" }, .babelrcファイルを作成して、プ
power-assert + babel as a development tool
3行まとめ espower-babelは役目を終えたので、Deprecated Babel + power-assertはbabel-preset-power-assertを使う コード上はrequire("power-assert")とrequire("assert") どちらでもpower-assert化できるようになった espower-babelは非推奨へ Babel + Mocha + power-assertの組み合わせを出来るだけ設定ファイルなどを作らずに使えるespower-babelというモジュールを書いていましたが、役目を終えたので非推奨(deprecated)にしました。 テストコードをES6+power-assertで書けるespower-babel 3.0.0リリース | Web Scratch 理由としては、Babel@6からは設定(ファイル)を必ず必要とするの
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
ライブラリをES2015(ES6)で書いて公開する所から始めよう
この記事はECMAScript 2015の事始めとして、ライブラリをECMAScript 2015で書いて公開するというところから始めるのがいいのではという内容です。 ECMAScript 2015(ES2015)はES6とも呼ばれていてどちらも同じものを指しますが、この記事ではES2015に統一します。 ECMAScriptのバージョンについては次のページを参照してください。 ECMAScript · JavaScriptの入門書 #jsprimer 2018-12-27: 追記 textlint/textlint-rule-helperのmasterはTypeScriptの実装へ変換されています。 Babelの実装はhttps://github.com/textlint/textlint-rule-helper/tree/2.0.1から参照できます Babel から TypeScrip
karma+webpack+babel+mocha+power-assert の設定 - Qiita
テストランナーとして karma（実行環境は Chrome）、モジュール管理は webpack、トランスパイラは Babel、テストフレームワークに mocha、アサーションライブラリは power-assert を使った設定になります。 webpackの代わりにbrowserifyを使った設定例や、karma以外のテストランナーの設定例、power-assertの代わりにchaiを使った設定例は見つかったのですが、上記組み合わせがなかったので参考になれば幸いです。 最終的な設定はこちら module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha'], files: [ 'path/to/tests/**/*.js' ], exclude: [], plugins: [ 'karma-
BabelでES2015の自動コンパイル環境を作る（Browserify / gulp / Grunt / webpack）
今年2015年6月にJavaScriptの標準仕様であるECMAScript 2015（ES2015 / ES6）が正式にリリースされ、フロントエンド界隈ではかなり盛り上がってきています。先日のHTML5とか勉強会も『ECMAScript 2015 & 2016特集』というテーマで開催されていました。そうした盛り上がりの中で思うのは、「すでにBabelありきで話が進められている」ということです。Babelも最初のコミットからやっと1年経ったくらいです。まだまだ使い方についてわからない方もいると思うので、ここでまとめておこうと思います。特に使用頻度が高いファイル状態を監視し自動でコンパイルする環境構築方法となります。 はじめに（ES2015とは）今年2015年6月に、これまで長々と仕様の策定が進められてきたECMAScriptの6thエディションがECMAScript2015（ES2015）
サイでもわかる？！ ESLint 導入 - |> Weeeeeeb
Node.js学園祭2015に行ってからESLintを導入したかった やっぱりJavaScriptって柔軟で優秀だから色んな書き方できるじゃないですか。 関数宣言の中に関数宣言やったり(うっ) 上記は関係ないんですけど、 私は自分のJavaScriptのコードに不安を感じることがあって Lintの導入は考えていました。 JavaScriptですから潮流が激しくて色々なツールがありますよね。 JSHint, JSLint, JSCS, そして ESLint。 ありすぎんのよ…どれなんだよと… 環境の構築のこだわりすぎて 本当に作りたいものがおろそかになる気がして Lintは考えることをやめていました（泣） こんな私の火付け役、それが表題のNode.js学園祭2015です。 Node.js学園祭2015「フロントエンドに秩序を取り戻す方法」を聞いて、 駄目だこいつ（私のコード）… 早くなんとか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mocha + enzyme + power-assertの環境構築メモ - Qiita
Destructuring assignmentのご利用は計画的に - Qiita
babel-watch
Babel webpack
Babel Snippets - Packages - Package Control