開発環境
自分が使っていたところだけを簡単に。詳しくはhttps://webpack.js.org/guides/migrating 以下、webpack.config.jsの変更点: resolve.extenstions 空の文字列は必要なくなったので削除する。ちなみにデフォルトでは.js、.jsonがresolveされている。 // v1 re…
React Hot Loader + Browsersync React Hot Loader を使えば、エディタを保存した時点で、React コンポーネントの変更が検知され、ブラウザの更新が自動で行われます。さらに、React Hot Loader はHotModuleReplacementPlugin(HMR) を使用しているため、更新…
ややこしい問題に直面したので、メモしておく。 問題 次のように、jQueryでコールバック関数にアロー関数を用いたスクリプトを記述する。 $("item > title").each(() => { let title = $(this).text(); console.log(title); }); このES6の構文ををBabelでES5…
nginxをbrewでインストール $ brew install nginx nginxコマンドを打つとコマンドが見つからない $ nginx nginx: command not found インストールはされているが, 有効化されていないとのこと $ brew install nginx Warning: nginx-1.8.0 already installed,…
前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。 さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…
1日に何回このようなimport宣言を書いていますか? import React from 'react' import ReactDOM 'react-dom' import $ from 'jquery' ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。 そこで活躍するのがWebpack…
Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…
fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…
参考: Using ES6 with gulp — Mark Goodyear — Front-end developer and designer gulp 3.9からgulpfile.jsにES6が使えます。 JavaScriptを使うなら早めに慣れておきたいところ。 前の記事で作ったgulpfileをES6で書き換えてみましょう。 uraway.hatenablog…
横着しないでひとつづつ理解していくことにする。 今回はGulpとBrowserifyを合わせて使ってみる。 参考: javascript - Why do I have to use vinyl-source-stream with gulp? - Stack Overflow gulp/API.md at master · gulpjs/gulp · GitHub Gulp + Browse…
参考: javascript - Client on node: Uncaught ReferenceError: require is not defined - Stack Overflow Uncaught ReferenceError: require is not defined nodeのモジュールをvar foo = require('foo');で読み込ませたい… しかしブラウザで確認すると、…
サーバー再起動、ブラウザリロードとか面倒くさい!ってことで、それらを自動で行ってくれるBowserSyncモジュールと、ついでにアプリの骨格を作ってくれるexpressを導入する手順をまとめます。参考:gulp + node + express で BrowserSync 使おう - ぶるーす…
詰まったのでメモとして残しておきます。dotinstall.com dotinstallのコンテンツの流れに従って、CentOSによって動くローカル開発環境(local server)を導入してみましょう。