react-aceのexample実行

はじめに

ブラウザ上で動作するJavaScript製のエディタAceが存在します。 そして、その派生としてAceをReact上で動かせるようにしたreact-aceというパッケージがあるのですが、 こちらに含まれているexampleを実行する方法が記載されていなかったので備忘しておきます。

Ace - The High Performance Code Editor for the Web github.com

入門 React ―コンポーネントベースのWebフロントエンド開発

手順

1.clonse react-ace

何はともあれまずは対象のリポジトリのクローンをしましょう

% git clone git@github.com:securingsincity/react-ace.git

リポジトリの中身は以下のようになっています。

.
├── LICENSE
├── README.md
├── example
│   ├── index.html
│   ├── index.js
│   ├── package.json
│   ├── server.js
│   └── webpack.config.js
├── lib
│   └── ace.js
├── package.json
├── src
│   └── ace.jsx
├── webpack.config.base.js
├── webpack.config.development.js
└── webpack.config.production.js

3 directories, 13 files

2.npm install(その１)

リポジトリをクローンしてきたら、リポジトリ直下でnpm install で必要なパッケージをインストールします。
(今回のメインディレクトリはexampleなのですが、ここでnpm istallを行っておかないと、後々エラーが出てしまいます。)

% npm install

その際、次のような行を見かけるかと思います。

…
ERROR in ./src/ace.jsx
Module not found: Error: Cannot resolve module 'react' in xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 @ ./src/ace.jsx 13:13-29
…
├── UNMET PEER DEPENDENCY react@^0.13.0 || ^0.14.0 || ^15.0.1
…
npm WARN react-ace@3.4.1 requires a peer of react@^0.13.0 || ^0.14.0 || ^15.0.1 but none was installed.

reactパッケージが見つからない。。。というようなことを言っていますが、 package.jsonを見ると、

  "peerDependencies": {
    "react": "^0.13.0 || ^0.14.0 || ^15.0.1"
  },

と書いてあります。
どうやらnpm v2までは、peerDependenciesに記載されたパッケージがインストールされていない場合はインストール自動的にインストールしていたようなのですが、npm v3以降は警告するのみで、インストール自体は自身で行う必要があるようです。

yukidarake.hateblo.jp

3.install react package

ということでreactパッケージをインストールします。

% npm install react

(このパッケージもインストールしておかないと後々エラーが出てしまいます。)

4.npm install(その2)

それでは今回のメイン、exampleディレクトリでの作業を行います。
まずは先ほどと同じようにパッケージのインストールから。

% cd example
% npm install

5.実行

これで準備が整いましたので、exampleサーバを起動しましょう。

% npm start

あとはブラウザで指定されたURLを確認するだけです。

付録

exampleのindex.htmlを見ていただくと

  <script src="/static/bundle.js"></script>

というjsを読み込んでいることがわかるかと思います。
しかし、bundle.jsなどというファイルは持っていません。

exampleサーバは、npm startによって起動された際に、
webpackという諸々の依存関係を解決したJSをビルドしてくれるものを利用してbundle.jsを生成し、 読み込めるようにしています。

qiita.com

ここではどのようなファイルが生成されるのかを見るために、 webpackのみ実行することでbundle.jsを出力させてみたいと思います。

# 方法その1 (直接実行 + 設定ファイルはデフォルト指定)
% ./node_modules/.bin/webpack

# 方法その2 (直接実行 + 設定ファイルを明示指定)
% ./node_modules/.bin/webpack --config webpack.config.js

# 方法その3 (package.jsonにコマンドを追記して実行)
% # package.jsonの中身を以下のように修正
% # ...
% # "scripts": {
% #   "start": "node server.js",
% #   "webpack": "webpack" または "webpack": "webpack --config webpack.config.js"
% # },
% 
% npm run webpack

# 方法その4(その他)
% # gulpを使う、shを書く その他各種

方法はいろいろありますが、bundle.jsを出力してみる程度であれば1〜3の方法で十分かと思います。

ビルド結果はdistディレクトリに出力されます。 ファイルサイズを見ていただくとわかるのですが、 このファイル6Mオーバーです。 で、デカイですね…^ ^;

これは使用に耐えるのでしょうかw

おわりに

今回はreact-aceそれもexampleの実行方法をご紹介させていただきました。
付録でも触れましたが、配布物はそこそこの大きさになります。
転送量の問題もありますので(gzipにしても1.5Mあります)サービスに利用するには少々キツイかもしれませんが、 自分の作業用に使う文にはいろいろカスタマイズできるのでいいかもしれませんね。