2017年3月31日金曜日

webpack.config.js の設定でハマる

Mac でwebpack 使ってたのですが、バックスラッシュと円記号(¥)の違いで、ハマりました。
Mac環境のUTF-8では、バックスラッシュは¥ とは違う扱いになるため、Windows の感覚でバックスラッシュを¥ にしてハマりました。
具体的には、以下のwebpack.config.js の設定に不備がありました。
正解  → test: /\.(js|jsx)$/,
間違い → test: /¥.(js|jsx)$/,

Windows では、¥ を\ に変換してくれるので、おそらく問題なく動作できると思います。(未確認)
下記のURL のサンプル作成で使用したwebpack.config.js を添付しておきます。
http://xiao-ctrl-y.com/2016/06/29/react-redux-begin-3/

var path = require('path')
var webpack = require('webpack')

module.exports = {
 entry: "./src/index",
 output: {
  path: path.join(__dirname, 'static'),
  filename: 'bundle.js',
  publicPath: '/static/'
 },
 resolve: {
  extensions: ['*', '.js', '.jsx']
 },
 module: {
  loaders: [
   {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    include: path.join(__dirname, 'src'),
    loader: 'babel-loader',
    query:{
     presets: ['es2015', 'react']
    }
   }
  ]
 }
};

2017年3月30日木曜日

SublimeText3 でPackage Control 利用時、Unable to download で動作できない場合

プロキシ認証の問題でPackage Control がインストールできないケースは、以下のURL のProxyHandler にプロキシ認証情報を設定すればよい。
https://packagecontrol.io/installation

これは、他のサイトに譲るとして、本投稿は、Package Control をインストール後に、以下のようにUnable to download が出た場合の対処について記載する。


とはいっても、やることは以下のことだけ。
Preferences > Package Settings > Package Control > Settings – User を開く

以下の私のSublimeText3 の設定例にある、http_proxy, https_proxy に、プロキシ情報を設定する。
{
 "bootstrapped": true,
 "http_proxy": "http://127.0.0.1:8888",
 "https_proxy": "http://127.0.0.1:8888",
 "in_process_packages":
 [
 ],
 "installed_packages":
 [
  "Babel",
  "ConvertToUTF8",
  "Emacs Pro Essentials",
  "JavaScript & NodeJS Snippets",
  "JavaScriptNext - ES6 Syntax",
  "Monokai JSON+",
  "Package Control",
  "Pretty JSON",
  "ReactJS",
  "ReactJS Snippets",
  "SublimeLinter",
  "SublimeLinter-jshint",
  "TypeScript"
 ]
}

設定値の記載方法は以下の通り。
"http_proxy": host:port,
"https_proxy": host:port,
"proxy_username": username,
"proxy_password": password

2017年3月21日火曜日

Windows でReact.js お試しコードの環境構築2

前回に引き続き、以下のURL のサンプル作成に取り掛かります。
http://c16e.com/1510161700/
まず、webpack の設定からハマります。
新しいbabel とwebpack の互換性がなくなっているようで、loader の設定値を正しくしないと動きません。
で、色々調べた結果、以下のサイトを見たのですが、webpack.config.js に、ちょいと間違いがあるようで、正しく動作しません。
https://yoheikoga.github.io/2016/06/22/error-is-occur-in-30-minutes-like-button-tutorial-of-React/
で、色々試して、以下のパッケージをインストールします。
npm install babel-core babel-preset-es2015 babel-preset-stage-0 --save-dev

インストールしたら、以下の記載をwebpack.config.js に書いたら、build できました。
module.exports = {
  entry: __dirname + "/src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "like-button.js"
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: "babel-loader", query: { presets: ['es2015', 'stage-0', 'react'] } }
    ]
  }
};

次は、webpack でビルドするために、webpack をインストールした時に生成される、package.json にscripts に記載を追加します。
"scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },

最後の「,」はpackage.json の最後の要素なら不要です。元々のサンプルサイトでは、「rm -rf dist/*.js && 」という記載がありますが、これは、dist フォルダ以下のファイルを削除後にwebpack コマンドで新規生成されるファイルを出力しますよってことで、Windows のコマンドに置き換えたのですが、うまくいかなかったので、とりあえず、この削除コマンドがなくても動作できるので消しました。

とりあえず、このハマりどころをクリアすれば、サンプルサイトのサンプルは動作できると思います。

2017年3月17日金曜日

Windows でReact.js お試しコードの環境構築1

React やるのに環境を本当に1から構築しようとトライした時、記事が古かったりと色々ハマったので、備忘録。

この記事は環境構築までとします。
やりたいこと: React 使って適当なサンプル作りたい
サンプルは以下のものを参考にしました。

http://c16e.com/1510161700/

私はWindows7 の環境で実施したかったので、多少コマンド(touch をecho など)が違いますが、そこは適当に吸収しました。
で、以下から始めました。
 React って何かを調べる
 Babel って何かを調べる
 ES6 って何かを調べる

で、この辺が大体わかってから、サンプルの作成に取り掛かろうと思ったのですが、とりあえず、エディタを決めることに。探したらSublimeText3 が良さそうなので、それをインストール。
インストール後にやることは、以下の通り。
 パッケージコントロールのインストール(Ctrl+Alt+p でパッケージをインストールできるようになる)
 (emacs の人だけ)Emacs Pro Essentials をインストール
 SublimeLinter をインストール
 SublimeLinter-jshint をインストール
 JavaScript & NodeJS Snippets をインストール
 JavaScriptNext - ES6 Syntax をインストール
 Pretty JSON をインストール
 Babel をインストール
 ReactJS をインストール
 文字化けしたくない人はConvertToUTF8 もインストール
 TypeScript 使う人は、TypeScript もインストール

emacs 使いなので、Keybind を変更したいのですが、Preferences->Key Bindings で変更している記事が多いですが、メンドクサイので、Emacs Pro Essentials(Sublemacspro)を入れました。(絶対こっちのほうが楽ちんです。) それでも足りないKeybind がある場合は、先ほどのPreferences から設定をします。(Ctrl+h をBackspace として割当てるとか。)
とりあえず環境構築まで。次回はハマりどころを追加予定。