Testing React Components with Enzyme and Mocha - Semaphore
Full-stack web developer, passionate about solving engineering problems of all kinds with elegant solutions that deliver incredible user experiences. Some thoughts & some code @ ifelse.io. @markthethomas everywhere else. Introduction React has become an increasingly popular and widely-used JavaScript application tool for developing web applications. Popular frameworks like Angular.js, Ember.js, an
babel6にmodule.exportsを追加するだけのプラグインを作った - Qiita
babel6はCommonJSに対応しないので、コンパイル済みのコードにmodule.exports（requireのエントリポイント）が含まれません。これは、transform-es2015-modules-commonjsプラグインを使っても改善しませんでした。issueもしょっちゅう立ってはLockされてます。 add-module-exportsプラグインというものを作成しました。これはコード末尾にmodule.exports文を加えます。 npm install babel-cli --save-dev npm install babel-preset-es2015 --save-dev npm install babel-plugin-add-module-exports --save-dev 0.1.*系 babel@5の動作に準拠するバージョン0.1.0を公開しました。 こ
Babel6でMochaとChaiを使ったテストを書く - Qiita
はじめに 最近Reactとか触っています。Github上とかでいろいろなコードを見させていただくのですが、React周辺はReduxを使っているのでBabel使ってるけど、テストはFacebookのJestを使っていてあんまりBabel使えてなかったり、もはやテスト書いてなかったりします。 そもそもReactはフロントエンドのライブラリなので、あまりテストを書きたくなくなるのもわかります。ですが、Railsやっててもなるべくテストを書くことを尊重する雰囲気になってきているので、React周辺でもテストを書いていきたいのです。そこで、JestではなくてMochaとChaiを使ってテストを書くにはどうするべきなのかと思い、まとめました。 環境 node: v5.1.0 npm: 3.3.12 ディレクトリ構成
もうBabelじゃない - Bubleだ。 - Qiita
JavaScript を書くとき、もはや新しい ES でないとストレスではないでしょうか。 だからこそ僕らは新しい ES で開発してから、ブラウザ対応のために Babel を使って ES5 にトランスパイルするというのが定石となっていました。 しかし、必要最小限の機能に絞って高速なトランスパイルを実現する Buble 1 が登場しました。 TL;DR Buble は、 Babel やその他のトランスパイラと比べて以下の点で異なります。 仕様への準拠ではなくブラウザで動くことを目指す 設定ファイルは不要 高速なトランスパイル Babel は新しい ES で書かれたコードを ES5 ( など )の仕様に準拠したコードにトランスパイルすることが目的です。一方で、新しい ES から ES5 への “完全” な変換は不可能です。 そこで Buble の取ったアプローチは、他仕様へのトランスパイルでは
webpack + babel-loaderでES6デビューしつつ、gulpもES6で書く - Qiita
こんにちは！ギャザリーで開発を担当している手塚＠inureoです。 今回はタイトル通りwebpack + babel-loaderでES6デビューしつつ、gulpもES6で書く、というところをやってみたいと思います。 gulpfile.jsをES6で書こうと思った理由 「ES6やりたいなー、しかも業務に直結するところで。」と考えていた時に、こちらの記事のgulpfile.js をES6で書く理由を拝見して「たしかにgulpfileなら実装に頭使わないし慣れるのにはピッタリだ！」と思ったからです。 早速ES6でgulpfileを書いていく gulpfileをES6で書くには、gulp側でES6対応をするか、node.js側でES6対応をするかの2択になります。 gulp側での対応 gulpの3.9.0からbabelを標準サポートするようになりました。ファイル名をgulpfile.babel.
Electron の開発環境を gulp + babel で整える - Qiita
概要 Electronとは、JavaScriptでデスクトップアプリが作れるツールです。 詳しくは前回の記事「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」をご覧くだい。 これまではElectronを使ったアプリ開発方法について書いてきました。 今回はコードをガリガリ書いていく前に、開発環境を整えたいと思います。 今回はElectronの開発を ES6 + React でしたいと思いました。 そのための開発環境を gulp + babel を使って整えていきます。 この辺りは他の記事をかなり参考にしました。既に同じようなことをやっている方がたくさんいらっしゃいますが、個人的なメモも兼ねてまとめます。 参考記事 * ぼくのかんがえたさいきょうのElectron 何がしたいか まずは何がしたいか、というところから話します。 JavaScr
flat関数の書き方 - Babel · The compiler for writing next generation JavaScript
The compiler for next generation JavaScript
The First React on Rails
8. 8 ルートディレクトリに/clientを作り、client/react- client/src/component/*.js のようなコンポーネント群を作っていく client/react-client/src/ClientGlobal.jsをエンドポイントとして、グローバル変数 を管理 import Items from ‘./comnents/items.js’ import CommentPage from './container/CommentPage' window.Items = Item window.CommentPage = CommentPage React 9. 9 gulp.task('compile-es6', function() { var files; files = glob.sync('./client/react-client/src/Clie
babelify v7.2 を試す - アカベコマイリ
2015/10/29 に JavaScript の Transpiler である Babel の 6.0.0 がリリースされた。 6.0.0 Released これまでの Babel はデフォルトで ES6 と React JSX 変換に対応していたが、これからはプラグイン化されたものを指定する形式になるのだという。Browserify 用 Babel の babelify も同様で、これを最新に更新してコンパイルを実行すると ES6 部分が SyntaxError になる。 $ npm run build:js-main > electron-starter@1.0.4 build:js-main .../examples-electron/electron-starter > browserify -t babelify ./src/js/main/Main.js --im --no-
React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita
手元でコードを書きながら React.js を学習しようと、タイトルどおりの最小構成を作ってみました。 上記の公式ページの Starter Kit や Tutorial の構成が物足りなかったので.. GitHub に置いたので、よろしければ参考にしてください。 ⇒ https://github.com/hkusu/react-babel-browserify-gulp-sample 上記の README.md に記載している通り、特徴としては次のとおりです。 ECMAScript 6 構文のサポートおよび JSX ファイルのコンパイルに Babel を利用 依存モジュールの管理(CommonJS準拠)に Browserify を利用 タスクランナーとして gulp を利用 またサンプルコードとして、簡単なデータバインドを React.js で実装してあります。デモは こちら(GitHub
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Babel + React + Webpack の最小構成ひな形作った - Qiita
@babel/register · Babel