読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

webpack

React, Express, Webpack, Relay, GraphQLでつくるSPA

アプリケーションと呼ぶには程遠いですが、ひとまず最低限の形になったのでメモ。 From REST to GraphQLを読んだのが、直接のきっかけっちゃあきっかけ。 JSだけで、一通り作ってみようと。 注意書き 筆者は、ReactもRelayもGraphQLも初心者です。このポスト…

webpackはどのように動いているのか(3)

webpackの仕組みについて、見ていきます。 前回↓ chuckwebtips.hatenablog.com 前回は、webpackがexportやmodule.exportsをどのように変換するかについて見てみました。 今回は、モジュールのimportやrequireがどのように処理されるかを見てみます。 まず、…

webpackはどのように動いているのか(2)

引き続き、webpackの仕組みについて見ていきます。 chuckwebtips.hatenablog.com 前回書いたコードはこちらでした。 // gist.github.com 本当に単純な定数定義ですね。 実際の開発では、JavaScriptはモジュール単位で書くのが基本だと思います。なので、まず…

webpackはどのように動いているのか(1)

ずっとWebpackのソースコードを読んだり、仕組みを知りたかったのですが、時間がなくてやれずにいました。 今日からはWebpackの仕組みについて、ちょっとずつ探っていこうと思います。何度かに分けて書きますが、記事が溜まってきたらQiitaにでもまとめます…

JS開発環境の構築(4)GraphQLのインテグレーション

前回までで、JSの開発環境が整いました。 chuckwebtips.hatenablog.com ビューライブラリにReact.jsを、サーバサイドにExpressを、そして開発環境のサポートにはWebpackを利用しています。 今回は、ReactのうえにRelayを載せていきます。 Relayとは最近話題…

JS開発環境の構築(3) Expressを利用した、Reactのサーバサイドレンダリング

JSでつくる開発環境のつづきです。 chuckwebtips.hatenablog.com 今回は、Reactをサーバサイドレンダリングできるようにします。主にExpressを利用して実現するのですが、そこらへんは以下の記事に書いたとおりです。 chuckwebtips.hatenablog.com ↑のとおり…

JS開発環境の構築(2) WebpackローカルサーバのHMR起動

↓のつづき。 chuckwebtips.hatenablog.com 今回は、スムーズに開発が進むように、WebpackのHMR(HotModuleReplacement)をオンにします。 以前、QiitaにPostしたこの記事では、CLIから実行することが推奨されていました。 qiita.com ただし、今回はコンフィ…

JS開発環境の構築(1)

つくるやつ React, Webpack, Express, Relay, GraphQLあたりをつかった何か。 内容はあまり重要ではなくて、ひとまずぜんぶJSだけで作ってみたい。 ただし、以下の記事でも書かれているように、必要ないものをどんどん盛り込むのは違うと思う。 medium.com …

React + Webpack + Expressで初めてのサーバサイドレンダリング

すみません、こちらの記事に完全にお世話になりました。 サーバーサイドReactをwebpackを使って最小構成で試す (ES6 & TypeScript) - Namiking.net 以下、すべて写経のメモになります。 いつものクライアントレンダリング まずは、HTML。 gistacfad61f44971…

自分なりに順を追って、Reduxを理解する(5)

引き続き、Reduxのお勉強です。 chuckwebtips.hatenablog.com 今回はようやくReduxに触れます。ひとまずactionを書こうと思います。 CSS in JS with Webpack actionの前に、ちょっとだけスタイルを書きます。 今回は、HTMLではなく、JS内にスタイルを持って…

ReduxチュートリアルをWebpackでビルド

Reduxをもっと頭に定着させるため、今一度チュートリアルを写経しました。 ちなみに前回は写経したはいいものの、Webpackでのビルドが通りませんでした。 chuckwebtips.hatenablog.com 結論から言うと、bebel-preset-reactというパッケージが足りていません…

自分なりに順を追って、Reduxを理解する(2)

Redux練習記録です。 前回は基本的なセットアップを行いました。 chuckwebtips.hatenablog.com 今回からは実際にReactを書いていきます。 Reactの基本となる、コンポーネントを作成します。 コンポーネントディレクトリ Reduxを利用する場合のコンポーネント…

webpack上でglobを使う

webpack上でglobを使う方法について、業務で触れることがあったのでメモ。 インストール なにはともあれインストール。 $ npm init -y $ npm install webpack glob ディレクトリ構造 ディレクトリを以下のように作りました。 src/にJSファイルが格納されてい…

非公式Webpackチュートリアル その5

ひきつづきWebpackのチュートリアルを進めていきます。 前回までで、ローダーを使ったバンドルの方法を勉強しました。 chuckwebtips.hatenablog.com 今回は、さらにプラグインを追加していきます。 github.com さらなるプラグインの追加 今回はもう1つ、新…

非公式Webpackチュートリアル その4

引き続きWebpackのチュートリアルを消化していきます。前回はプラグインの使用方法を学びました。 chuckwebtips.hatenablog.com 今回はその中でもcss-loaderに着目します。 css-loader WebpackはJSファイル以外もrequireすることができます。そのためには、…

非公式Webpackチュートリアル その3

前回は、最小構成でのWebpackの利用を学びました。 chuckwebtips.hatenablog.com 今回はWebpackチュートリアルの第3回目。プラグインの使用について学びます。 github.com プラグインの使用 今回はファイルを圧縮するUgilifyJSPluginを使用します。 config…

非公式Webpackチュートリアル その2

非公式Webpackチュートリアルのその2です。 前回の記事がこちら。 chuckwebtips.hatenablog.com 今回消化するチュートリアルはこちらです。 github.co 最小構成例 前回はバンドラとローダーという俯瞰的な例でしたが、今回からは具体的なチュートリアルに入…

非公式Webpackチュートリアル その1

今日からWebpackのチュートリアルを何回かに分けて消化していきます。 消化するのはこちらのチュートリアル。 github.com 公式ではなく、有志によるチュートリアルです。 主にBabelやES2015をガリガリ使っていく前提で書かれているので、かなり有用なチュー…

Rails環境にWebpackを導入する(後半)

どうも、chuckです。 前回は以下の記事を参考に、Rails環境にWebPackを導入してみました。 qiita.com その記事がこちら↓ chuckwebtips.hatenablog.com 前回までで、環境設定は終わったので、今回は実際にJSを書いてビルドをしてみようと思います。 モダンJav…

Rails環境にWebpackを導入する(前半)

どうも!chuckです。 今日はRailsの開発環境にWebpackを導入してみたいと思います。 ※前提として、僕はまだまだひよっこエンジニアです。記事の中に誤りがあるかもしれません。その際は何卒ご指摘いただけると助かります。 Webpackとは gulpやbrowserifyのよ…

WebPack公式チュートリアルを消化する(前半)

WebPackの公式チュートリアルを消化していきます。WebPackはすでに何度か触っていますが、一度基本から学んでみます。 過去記事↓ chuckwebtips.hatenablog.com インストール 何はともあれ、WebPackをインストールします。 今まではpackage.jsonに記述してロ…