Webpack v1からv2へのマイグレーションメモ

開発環境

自分が使っていたところだけを簡単に。詳しくはhttps://webpack.js.org/guides/migrating 以下、webpack.config.jsの変更点: resolve.extenstions 空の文字列は必要なくなったので削除する。ちなみにデフォルトでは.js、.jsonがresolveされている。 // v1 re…

2016-03-25

webpack, React Hot Loader + Browsersync でクロスブラウジング+ホットリロード開発

開発環境フレームワーク

React Hot Loader + Browsersync React Hot Loader を使えば、エディタを保存した時点で、React コンポーネントの変更が検知され、ブラウザの更新が自動で行われます。さらに、React Hot Loader はHotModuleReplacementPlugin(HMR) を使用しているため、更新…

2016-03-09

Babelを使うとアロー関数内のthisがundefinedになる

フレームワーク開発環境 javascript

ややこしい問題に直面したので、メモしておく。問題次のように、jQueryでコールバック関数にアロー関数を用いたスクリプトを記述する。 $("item > title").each(() => { let title = $(this).text(); console.log(title); }); このES6の構文ををBabelでES5…

2016-01-27

Error: Could not symlink share/man/man8/nginx.8

インフラソフトウェア管理開発環境

nginxをbrewでインストール $ brew install nginx nginxコマンドを打つとコマンドが見つからない $ nginx nginx: command not found インストールはされているが, 有効化されていないとのこと $ brew install nginx Warning: nginx-1.8.0 already installed,…

2016-01-24

Uncaught ReferenceError: require is not defined 対処法まとめ

フレームワーク開発環境 javascript

前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…

2016-01-08

いつまでimport Reactしているつもり？ Webpack-ProviderPlugin

開発環境フレームワーク

1日に何回このようなimport宣言を書いていますか？ import React from 'react' import ReactDOM 'react-dom' import $ from 'jquery' ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。そこで活躍するのがWebpack…

2015-12-25

Webpack + React + ES6の最小構成を考えてみる。

javascript フレームワーク開発環境

Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…

2015-12-20

快適な開発環境を目指して（４）

開発環境 javascript フレームワーク

fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…

2015-12-07

快適な開発環境を目指して（Gulp + Browserify + ES6）

開発環境 javascript

参考： Using ES6 with gulp — Mark Goodyear — Front-end developer and designer gulp 3.9からgulpfile.jsにES6が使えます。 JavaScriptを使うなら早めに慣れておきたいところ。前の記事で作ったgulpfileをES6で書き換えてみましょう。 uraway.hatenablog…

2015-12-07

快適な開発環境を目指して（Gulp + Browserify）

javascript 開発環境

横着しないでひとつづつ理解していくことにする。今回は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…

2015-11-30

require is not definedを解消してrequireを使えるようにする

開発環境

参考： javascript - Client on node: Uncaught ReferenceError: require is not defined - Stack Overflow Uncaught ReferenceError: require is not defined nodeのモジュールをvar foo = require('foo');で読み込ませたい… しかしブラウザで確認すると、…