トップ > 開発環境

開発環境

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

開発環境

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

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

開発環境 フレームワーク

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

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

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

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

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,…

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

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

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

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

開発環境 フレームワーク

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

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

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

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

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

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

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

快適な開発環境を目指して（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…

快適な開発環境を目指して（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…

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');で読み込ませたい… しかしブラウザで確認すると、…

プログラミング初心者がexpressとgulpでローカル開発環境を構築する

ライブラリ javascript 開発環境

サーバー再起動、ブラウザリロードとか面倒くさい！ってことで、それらを自動で行ってくれるBowserSyncモジュールと、ついでにアプリの骨格を作ってくれるexpressを導入する手順をまとめます。参考：gulp + node + express で BrowserSync 使おう - ぶるーす…

ローカル開発環境の構築を構築してみる

開発環境

詰まったのでメモとして残しておきます。dotinstall.com dotinstallのコンテンツの流れに従って、CentOSによって動くローカル開発環境（local server）を導入してみましょう。