React on ES6+ · Babel
Posted Jun 7, 2015 by Steven Luscher This is a guest post from Steven Luscher. Steven works on Relay at Facebook – a JavaScript framework for building applications using React and GraphQL. Follow Steven on Instagram, GitHub, and Twitter. While redesigning Instagram Web from the inside out this year, we enjoyed using a number of ES6+ features to write our React components. Allow me to highlight som
(Babel 5における)ES6のモジュールを解説してみた - uehaj's blog
警告 以下でのモジュールの説明はトランスパイラであるBabel 5,6で動作を確認した振舞いについての記述です。2015年11月現時点で、ECMAScriptのモジュール仕様策定範囲は、本来の全体範囲のまだ一部であるとのことです。その状況でのBabelの実装は、良く言えば先行的、悪く言えば将来そのままである保証はなく、現時点でも他のES2015をサポートする処理系との間での相互運用の保証はありません。また、現時点でBabelのモジュール機能を使うこと自体にリスクがあるという意見もあります。CommonJS側からBabelが生成したモジュールをCommon JSモジュールとして読み込もうとしたときの互換の問題として、Babel5で可能だったことがBabel6では利用不可になる、といったことも起きているようです。 そこらへんを含めて解説されているこちらの資料が参考になります。 (2015/11
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"
gulpfile.jsをES6で書いてみよう - tacamy--blog
なぜgulpfile.jsをES6で書くの？ ES6にとりあえず触れて慣れてみたいという場合に、まずはgulpfile.jsで試してみるとよさそうという風潮があるみたい。理由はたぶん次のような感じかなと思ってる。 他への影響が少ない コードの分量が少ない 実装にあまり頭を使わないで書ける 環境によってはbabel等のトランスパイラをインストールせずにES6がそのまま使える 環境を準備する gulpfile.jsでES6を使えるようにするには、gulp側で対応するか、Node.js側で対応するかどちらかになります。 gulp側でES6に対応する gulpはv3.9.0からbabelを標準サポートするようになったので、babelを介してES6構文を利用できるようになりました。 ただし、ES6構文を使う場合は、ファイル名をgulpfile.babel.jsにする必要があります gulpのバージョ
【古い記事】Babelにおける import / export - Qiita
2016-01-31追記 この記事を最初に書いた頃は他に何も情報がありませんでしたが、今ではよりだいぶわかりやすい資料が出揃ってきました。しっかりとしたimport/exportの仕様をもっと知りたい場合は下記を参照することを推奨します https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import http://www.slideshare.net/teppeis/effective-es6 http://uehaj.hatenablog.com/entry/2015/11/07/001848 2015/12/05追記 コメント欄より Babel v6 から Babel 公式の transform である transform-es2015-modules-commonjs を使った場合 ES
New ES6 project with Babel, Browserify & Gulp
gulpfile.js �T� V ��Ѓ V var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var browserify = require('browserify'); var watchify = require('watchify'); var babel = require('babelify'); function compile(watch) { var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel)
Valstar.dev
Working at Konrad Group. I build web things. Creator of Gorgon.js and software developer currently specializing in Typescript, React and GraphQL based systems. Outside of programming, I enjoy cycling and boardgames. I like to cycle around Toronto where I live when the weather is good and play some video games when it's not. Find me on Gitlab Github Strava LinkedIn Mastodon Konrad GroupSoftware Dev
フロントエンドでもES6構文使ってみる【webpack+babel-loader（旧6to5-loader）】 - yutaponのブログ
【--- 追記（2015/02/22）---】 2/15に6to5がBabelと名称変更したので、記事の内容もBabelを使うよう変更しました。 Not Born to Die · Babel 【--- 追記ここまで ---】 2/7にnode.js v0.12.0がリリースされました。 Node v0.12.0 (Stable) 安定版のメジャーアップデートでES6構文がいよいよ一般的になるのではないでしょうか。 そして最近良く聞くBabel(旧6to5)。 ES6+のコードをES5に変換してくれるということで、ES6構文を動かせる環境が浸透していないフロントエンドで役立つライブラリです。 Babelはgrunt, gulp, browserifyなど多数のビルドツールで扱えるプラグインが提供されているので、jsのビルド工程があるプロジェクトであれば簡単に導入できると思います。 今回は前
The Six Things You Need To Know About Babel 6
Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. But seemingly overnight, Babel 6 changed everything. The babel package was deprecated, running babel doesn’t actually transform ES2015 to ES5, and the old docs have basically disappeared. But Don’t Panic! To get you up to speed, I’ve put together a brief list of the six most important ch
Babelを6系にアップデートしたらgulpでこける - Qiita
gulpの3.9.0からES6でタスクを記述できるようになったので使っていたけど、 Babelの6系にアップデートしたら動かなくなった。 ※ぼーっとしてたら最近いろいろアップデートされてていろいろ動かなくなっているので下の方に追記(2016/01/26) 現象 gulp: 3.9.0 babel-core: 6.0.14 以下のようにgulpコマンドでdefaultタスクを実行しようとしたところ importなんてしらない！と怒られる。。 [sawapi: ~/dev/git/sawapi/mw]$ gulp [17:11:48] Requiring external module babel-core/register /home/sawapi/dev/git/sawapi/mw/gulpfile.babel.js:3 import requireDir from 'require-di
6.0.0 Released · Babel
NOTE: Not all integrations have been updated yet. This is a very disruptive major so please bear with us as we smooth out the edges. It’s hard to believe it’s been a year since the Babel project started, but there was a birthday cake, so it must be real! I work with some super awesome people. Thank you @cpojer and Ovidiu! pic.twitter.com/l1NzyobiBz — Sebastian McKenzie (@sebmck) September 28, 2015
React on ES6+ · Babel
Posted Jun 7, 2015 by Steven Luscher This is a guest post from Steven Luscher. Steven works on Relay at Facebook – a JavaScript framework for building applications using React and GraphQL. Follow Steven on Instagram, GitHub, and Twitter. While redesigning Instagram Web from the inside out this year, we enjoyed using a number of ES6+ features to write our React components. Allow me to highlight som
Setting up an ES6 Project Using Babel and webpack — SitePoint
In this article, we’re going to look at creating a build setup for handling modern JavaScript (running in web browsers) using Babel and webpack. This is needed to ensure that our modern JavaScript code in particular is made compatible with a wider range of browsers than it might otherwise be. JavaScript, like most web-related technologies, is evolving all the time. In the good old days, we could d
babelify で ES6 を試す - アカベコマイリ
React v0.13.0 から ECMAScript 6 (以下 ES6) の class によるコンポーネント定義がサポートされた。また Node v0.12 でも一部の機能が有効となっている。このように ES6 もだいぶ身近になってき。先行学習もかねて趣味の開発では積極採用してゆきたい。 とはいえある程度は広範な環境で動いてほしい。そのため実装は ES6 でおこない実行用スクリプトは ES5 に変換したものを使用する。これを実現するため Browserify transform の babel/babelify を試す。 Babel Babel は ES6 として記述されたスクリプトを ES5 に変換するためのツールである。以前は 6to5 と呼ばれていたが諸事情により名称変更したそうだ。ES6 機能を先取りするという意味で AltJS だと TypeScript が近いのかもしれな
Babel <3 React · Babel
One of the things that surprises people quite often is that Babel supports JSX out of the box. Let me show you just how easy it is to switch: Note: There are tons of ways to use Babel, I'll only list a few of them here. If you'd like to see a more complete list check out our Using Babel page. In the Browser (docs) Before:
Babelで始める！モダンJavaScript開発
Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 （実際にはIE9以降から使用することを推奨します） 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同
Learn ES2015 · Babel
This document was originally taken from Luke Hoban's excellent es6features repo. Go give it a star on GitHub! Introduction ECMAScript 2015 is an ECMAScript standard that was ratified in June 2015. ES2015 is a significant update to the language, and the first major update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway no
Babel で IE8 対応する地獄 - Qiita
IE8 対応が必要な JavaScript に Babel (+ webpack) を使っているんだけど、素直に書くと動かないところがあったのでメモ。 とある事情により Polyfill も叶わない環境を想定している。 大体これと同じ内容: Caveats · Babel class を使うためには・・・ class を使ったコードを Babel に変換させると Object.defineProperties を使って class 相当を実現させようとする。しかし、IE8 以下の古い IE には Object.defineProperties が無いため、エラーになる。 IE8 でも class が使いたいときは、loose mode の es6.classes を使う:
ES6 in Production
Everybody is talking about ES6, but is anyone out there using it in production? Mango recently started adopting ES6 features that make our front-end code easier to write and maintain. In this talk, I will explain why we decided to use ES6, how we started to use it in production (using npm, browserify and babel) and I'll explain what problems we found along the way and how we solved them. Links: ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://stephensauceda.com/es6-in-your-gulp-tasks/