依存ライブラリの更新 fix #20 fix #21

jkazama · Feb 10, 2017 · b3ef504 · b3ef504
1 parent 8496821
commit b3ef504
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -17,12 +17,7 @@ sample-ui-react
 1. 「 `npm install -g gulp` 」 を実行して Gulp をインストール。
     - Mac ユーザは 「 `sudo npm install -g gulp` 」 で。
 1. コンソールで本ディレクトリ直下へ移動後、 「 `npm install` 」 を実行して Gulp ライブラリをインストール。
-    - Windows ユーザは 「 npm install --msvs_version=2013 」 。理由は後述
-
----
-
-標準で利用想定の [BrowserSync](http://www.browsersync.io/) は LiveReload よりも同期が早く開発生産性に大きく寄与しますが、 Windows ユーザの場合は [Python2.7](https://www.python.org/) と [Visual Studio 2013 Update N](https://www.visualstudio.com/downloads/download-visual-studio-vs) のインストールが必須となります。  
-*※ `Express 2013 for Desktop` を推奨します。 ( 手元で試したところ `Community 2015` では正しく動きませんでした ) *
+    - node-sass あたりでビルドに失敗した場合は、 「 `npm uninstall node-sass` 」 を実行してから再度試してみてください。
 
 ### 動作確認
 
@@ -33,17 +28,15 @@ sample-ui-react
     - application.yml の `extension.security.auth.enabled` を true にして起動すればログイン機能の確認も可能
 1. コンソールで本ディレクトリ直下へ移動し、 「 `gulp` 」 を実行
     - 確認用のブラウザが自動的に起動する。うまく起動しなかったときは 「 http://localhost:3000 」 へアクセス
-    - 画面が白く表示されてしまう時はブラウザの更新を押してみてください
-        - webpack のビルドが間に合っていない可能性が高いため
 
 ### 開発の流れ
 
-基本的にテンプレート ( .jade / .scss / .js ( ES6 ) ) を Web リソース ( .html / .css / .js ) へ Gulp / Webpack でリアルタイム変換させながら開発をしていきます。  
+基本的にテンプレート ( .pug / .scss / .js ( ES6 ) ) を Web リソース ( .html / .css / .js ) へ Gulp / Webpack でリアルタイム変換させながら開発をしていきます。  
 動作確認は Gulp で独自に Web サーバを立ち上げた後、ブラウザ上で行います。  
 
 #### 各種テンプレートファイルの解説
 
-- [Jade](http://jade-lang.com/)
+- [Pug](https://github.com/pugjs/pug)
     - HTML を生成するテンプレートツール。公式サイト TOP にある簡素な記法が特徴。
 - [Sass (SCSS)](http://sass-lang.com/)
     - CSS 表記を拡張するツール。変数や mixin 、ネスト表記などが利用可能。
@@ -88,8 +81,8 @@ public                               … deploy resources (auto generate)
     - style.css                      … from source/css
   fonts                              … icon font
   js
-    - bundler.js                     … from source/js (by Webpack)
-    - vendor.js                      … from vendor dist resource
+    - bundle.js                      … from source/js (by Webpack)
+    - vendor.bundle.js               … from vendor dist resource
   index.html                         … from source/html
 source
   css                                … css template files  [SCSS]
@@ -117,18 +110,18 @@ source
 
 | ライブラリ               | バージョン | 用途/追加理由 |
 | ----------------------- | -------- | ------------- |
-| `superagent`              | 1.7.+    | HTTP 連携ライブラリ |
-| `react`　　　　　　　　　　　　　　  | 0.14.+    | アプリケーションの UI 機能を提供 |
-| `react-dom`　　　　　　　　　　  | 0.14.+    | アプリケーションの UI 機能 ( DOM ) を提供 |
-| `react-router`           | 0.13.+    | React.js の SPA ルーティングサポート |
+| `superagent`             | 2.3.+    | HTTP 連携ライブラリ |
+| `react`　　　　　　　　　  | 15.4.+    | アプリケーションの UI 機能を提供 |
+| `react-dom`　　　　　　　  | 15.4.+    | アプリケーションの UI 機能 ( DOM ) を提供 |
+| `react-router`           | 3.0.+    | React.js の SPA ルーティングサポート |
 | `react-mixin`             | 3.0.+    | Reactクラス利用時のMixin拡張 |
-| `wolfy87-eventemitter`   | 4.3.+     | イベント連携ライブラリ |
-| `flux`                   | 2.1.+     | Facebook Flux ライブラリ |
-| `lodash` 　　　　　　　　　　　　  | 4.6.+    | 汎用ユーティリティライブラリ |
-| `dateformat`　　　　　　　　　  | 1.0.+    | 日時ライブラリ |
-| `jquery`                | 2.2.+     | DOM 操作サポート |
+| `wolfy87-eventemitter`   | 5.1.+     | イベント連携ライブラリ |
+| `flux`                   | 3.1.+     | Facebook Flux ライブラリ |
+| `lodash` 　　　　　　　　  | 4.17.+    | 汎用ユーティリティライブラリ |
+| `dateformat`　　　　　　  | 2.0.+    | 日時ライブラリ |
+| `jquery`                 | 3.1.+     | DOM 操作サポート |
 | `bootstrap-sass`         | 3.3.+    | CSS フレームワーク |
-| `fontawesome`             | 4.5.+    | フォントアイコンライブラリ |
+| `fontawesome`            | 4.6.+    | フォントアイコンライブラリ |
 
 ### License
 

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -24,19 +24,15 @@ const paths = {
 }
 const resource = {
   src: {
-    jade: `${paths.src.html}/**/*.jade`,
+    pug: `${paths.src.html}/**/*.pug`,
     webpack: {
       babel: `${paths.src.js}/**/*.(js|jsx)`
     },
     sass:   `${paths.src.css}/**/*.s+(a|c)ss`,
     static: `${paths.src.static}/**/*`
   },
   vendor: {
-    js: {
-      jquery:       `${paths.node.modules}/jquery/dist/jquery.js`,
-      bootstrap:    `${paths.node.modules}/bootstrap-sass/assets/javascripts/bootstrap.js`,
-      eventemitter: `${paths.node.modules}/wolfy87-eventemitter/EventEmitter.js`
-    },
+    js: ['jquery', 'lodash', 'dateformat', "wolfy87-eventemitter", 'react', 'react-dom', "react-router", 'bootstrap-sass'],
     fontawesome: `${paths.node.modules}/font-awesome/fonts/**/*`
   }
 }
@@ -61,7 +57,7 @@ gulp.task('default', ['build', 'server'])
 
 //## build for developer
 gulp.task('build', (callback) =>
-  runSequence('clean', ['build:jade', 'build:sass', 'build:webpack', 'build:static'], callback)
+  runSequence('clean', ['build:pug', 'build:sass', 'build:webpack', 'build:static'], callback)
 )
 
 //## build production
@@ -85,13 +81,21 @@ gulp.task('revision', (callback) =>
 // compile Webpack [ ES6(Babel) / Vue -> SPA(main.js) ]
 gulp.task('build:webpack', () => {
   process.env.NODE_ENV = (production == true) ? 'production' : 'development'
-  let plugins = [ new webpack.optimize.DedupePlugin() ]
-  if (production) plugins.push(new webpack.optimize.UglifyJsPlugin({compress: { warnings: false　}}))
+  let plugins = [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
+    new webpack.ProvidePlugin({jQuery: "jquery", $: "jquery"})
+  ]
+  if (production) plugins.push(new webpack.optimize.UglifyJsPlugin({compress: { warnings: false　}, sourceMap: false }))
   return gulp.src(resource.src.webpack.babel)
     .pipe($.plumber())
     .pipe(webpackStream({
-      entry: `${paths.src.js}/main.js`,
-      output: {filename: 'bundler.js'},
+      devtool: '#source-map',
+      entry: {
+        app: `${paths.src.js}/main.js`,
+        vendor: resource.vendor.js
+      },
+      output: {filename: 'bundle.js'},
       watch: !production,
       module: {
         loaders: [
@@ -108,11 +112,11 @@ gulp.task('build:webpack', () => {
     .pipe(browserSync.stream())  
 })
 
-// compile Jade -> HTML
-gulp.task('build:jade', () => {
-  return gulp.src(resource.src.jade)
+// compile Pug -> HTML
+gulp.task('build:pug', () => {
+  return gulp.src(resource.src.pug)
     .pipe($.plumber())
-    .pipe($.jade())
+    .pipe($.pug())
     .pipe($.htmlhint())
     .pipe($.htmlhint.reporter())
     .pipe(gulp.dest(paths.dist.root))
@@ -132,11 +136,6 @@ gulp.task('build:sass', () => {
 
 // copy Static Resource
 gulp.task('build:static', () => {
-  const libs = resource.vendor.js
-  gulp.src(Object.keys(libs).map((key) => libs[key]))
-    .pipe($.concat("vendor.js"))
-    .pipe($.if(production, $.uglify()))
-    .pipe(gulp.dest(paths.dist.js))
   gulp.src(resource.vendor.fontawesome)
     .pipe(gulp.dest(paths.dist.font))
   return gulp.src(resource.src.static)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-react",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "React.js Boilerplate",
   "main": "source/js/main.js",
   "scripts": {
@@ -13,54 +13,55 @@
     "type" : "git",
     "url" : "https://github.com/jkazama/sample-ui-react.git"
   },
+  "dependencies": {
+    "bootstrap-sass": "~3.3.0",
+    "co": "~4.6.0",
+    "dateformat": "~2.0.0",
+    "font-awesome": "~4.6.0",
+    "jquery": "~3.1.0",
+    "lodash": "~4.17.0",
+    "superagent": "~2.3.0",
+    "react": "~15.4.0",
+    "react-dom": "~15.4.0",
+    "react-router": "~3.0.0",
+    "react-mixin": "~3.0.0",
+    "wolfy87-eventemitter": "~5.1.0",
+    "flux": "~3.1.0"
+  },
   "devDependencies": {
-    "gulp": "~3.9.0",
-    "gulp-load-plugins": "~1.2.0",
+    "babel-core": "~6.18.0",
+    "babel-loader": "~6.2.0",
+    "babel-plugin-transform-runtime": "~6.15.0",
+    "babel-preset-es2015": "~6.14.0",
+    "babel-runtime": "~6.18.0",
+    "browser-sync": "~2.17.0",
+    "css-loader": "~0.25.0",
     "del": "~2.2.0",
-    "run-sequence": "~1.1.5",
-    "gulp-if": "2.0.0",
-    "gulp-slash": "1.1.3",
-    "gulp-order": "1.1.1",
-    "gulp-changed": "1.3.0",
+    "gulp": "~3.9.0",
+    "gulp-changed": "~1.3.0",
     "gulp-concat": "~2.6.0",
-    "gulp-plumber": "~1.0.1",
-    "gulp-jade": "~1.1.0",
-    "gulp-htmlhint": "~0.3.0",
-    "gulp-sass": "~2.1.1",
-    "gulp-pleeease": "~2.0.2",
-    "gulp-uglify": "~1.5.1",
     "gulp-cssmin": "~0.1.0",
-    "gulp-rev-all": "~0.8.22",
-    "webpack": "~1.12.14",
-    "webpack-stream": "~3.1.0",
+    "gulp-htmlhint": "~0.3.0",
+    "gulp-if": "~2.0.0",
+    "gulp-load-plugins": "~1.2.0",
+    "gulp-order": "~1.1.0",
+    "gulp-pleeease": "~2.0.0",
+    "gulp-plumber": "~1.1.0",
+    "gulp-pug": "~3.0.0",
+    "gulp-rev-all": "~0.8.0",
+    "gulp-sass": "~2.3.0",
+    "gulp-slash": "~1.1.0",
+    "gulp-uglify": "~1.5.0",
     "html-loader": "~0.4.0",
-    "template-html-loader": "~0.0.3",
-    "css-loader": "~0.23.1",
+    "node-sass": "~3.13.0",
+    "pug": "~2.0.0-beta6",
+    "pug-loader": "~2.3.0",
+    "run-sequence": "~1.2.0",
+    "sass-loader": "~4.0.0",
     "style-loader": "~0.13.0",
-    "sass-loader": "~3.1.2",
-    "node-sass": "~3.4.2",
-    "jade-loader": "~0.8.0",
-    "babel-loader": "~6.2.4",
-    "babel-core": "~6.9.0",
-    "babel-runtime": "~6.9.0",
-    "babel-plugin-transform-runtime": "~6.9.0",
-    "babel-preset-es2015 ": "~6.9.0",
-    "babel-preset-react ": "~6.5.0",
-    "browser-sync": "~2.11.0"
-  },
-  "dependencies": {
-    "co": "~4.6.0",
-    "superagent": "~1.7.2",
-    "react": "~0.14.7",
-    "react-dom": "~0.14.7",
-    "react-router": "~0.13.5",
-    "react-mixin": "~3.0.3",
-    "wolfy87-eventemitter": "~4.3.0",
-    "flux": "~2.1.1",
-    "lodash": "~4.6.0",
-    "dateformat": "~1.0.12",
-    "jquery": "~2.2.1",
-    "bootstrap-sass": "~3.3.6",
-    "font-awesome": "~4.5.0"
+    "template-html-loader": "~0.0.3",
+    "webpack": "~1.13.0",
+    "webpack-stream": "~3.2.0",
+    "babel-preset-react ": "~6.22.0"
   }
 }
diff --git a/source/html/index.jade → source/html/index.pug b/source/html/index.jade → source/html/index.pug
@@ -5,7 +5,7 @@ html(lang="ja")
     meta(content="IE=edge,chrome=1" http-equiv="X-UA-Compatible")
     title アプリケーション
     link(rel="stylesheet" href="/css/style.css")
-    script(src="/js/vendor.js")
+    script(src="/js/vendor.bundle.js")
   body
     #app
-    script(src="/js/bundler.js")
+    script(src="/js/bundle.js")
diff --git a/source/js/app.js b/source/js/app.js
@@ -1,17 +1,15 @@
 import React from "react"
-import Router from "react-router"
+import {Router} from "react-router"
 
 import {Component} from "platform/react"
 import Header from "components/header"
 
-const RouteHandler = Router.RouteHandler
-
 export default class App extends Component {
   render() {
     return(
       <div>
         <Header />
-        <RouteHandler/>
+        {this.props.children}
       </div>
     )
   }

diff --git a/source/js/main.js b/source/js/main.js
@@ -1,9 +1,10 @@
 // for React Routing
 import React from "react"
 import ReactDOM from "react-dom"
-import Router from "react-router"
+import {Router, hashHistory} from "react-router"
 import Routes from "routes"
 
-Router.run(Routes, function(Handler, state) {
-  ReactDOM.render(<Handler />, document.getElementById('app'))
-})
+ReactDOM.render(
+  <Router history={hashHistory}>{Routes}</Router>,
+  document.getElementById('app')
+)
diff --git a/source/js/platform/react-flux.js b/source/js/platform/react-flux.js
@@ -4,6 +4,7 @@ import {Ajax} from "platform/plain"
 
 import Dispatcher from "dispatcher/dispatcher"
 import EventTypes from "constants/event"
+import EventEmitter from "wolfy87-eventemitter"
 
 // array to object[key: key]
 export function KeyMirror(arrays) {

diff --git a/source/js/platform/react-ui.js b/source/js/platform/react-ui.js
@@ -81,7 +81,7 @@ export class Text extends Input {
     let classRow = this.props.row ? 'l-row ' : ''
     let className = `form-control ${classRow}${this.props.className}`
     let input = (
-      <input type='text' id={this.props.id} className={className} placeholder={this.props.placeholder} maxsize={this.props.maxsize} value={this.state.value} onChange={this.onChange.bind(this)} />
+      <input type='text' id={this.props.id} className={className} placeholder={this.props.placeholder} value={this.state.value || ""} onChange={this.onChange.bind(this)} />
     )
     let message = this.error()
     if (message) {

diff --git a/source/js/platform/react.js b/source/js/platform/react.js
@@ -1,15 +1,15 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import Router from "react-router"
+import {Router, Link, Navigation} from "react-router"
 import ReactMixin from 'react-mixin'
 
 import Param from "variables"
 import {Ajax} from "platform/plain"
 import * as ReactUI from "platform/react-ui"
 
 export class Component extends React.Component {
-  constructor(props) {
-    super(props)
+  constructor(props, context) {
+    super(props, context)
     let state = {
       message: {}
     }
@@ -19,11 +19,11 @@ export class Component extends React.Component {
     this.initialize()
   }
   static router() { return Router }
-  static routerLink() { return this.router().Link }
+  static routerLink() { return Link }
   initState() { return {} }
   initialize() { /* nothing. */ }
   forward(path) {
-    this.transitionTo(path)
+    this.context.router.transitionTo(path)
   }
   updateState(data) {
     if (!this.mounted) return
@@ -91,4 +91,8 @@ export class Component extends React.Component {
     this.mounted = false
   }
 }
-ReactMixin.onClass(Component, Router.Navigation)
+ReactMixin.onClass(Component, Navigation)
+Component.contextTypes = {
+    router: React.PropTypes.object
+}
+