Feature webpack

.babelrc

@@ -1 +1,3 @@
-{ "presets": ["es2015", "stage-0", "react"] }
+{
+  "presets": ["es2015", "stage-0", "react"]
+}

.eslintrc

@@ -13,7 +13,7 @@
     "jsx": true
   },
   "rules": {
-    "strict": [2, "global"],
+    "strict": [0, "global"],
     "indent": [2, 2],
     "quotes": [2, "single", "avoid-escape"],
     "camelcase": [2, {"properties": "never"}],

TODO.md

@@ -3,7 +3,7 @@
 - shuold be implementation
   - [x] eslint
   - [x] gulp
-  - [ ] webpack or browslify
+  - [x] webpack
   - [x] stylus
   - [x] circleCI or travisCI
   - [x] unitTest

app/actions/CommentAction.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const Nico = require('nicolive');
 const AppDispatcher = require('../dispatcher/AppDispatcher');

app/actions/ElectronAction.js

@@ -1,14 +1,14 @@
-'use babel';
+'use strict';
 
 const Immutable = require('immutable');
 const ElectronActionType = require('./types/ElectronActionTypes');
 const AppDispatcher = require('../dispatcher/AppDispatcher');
 let mainWindow = undefined;
 // TODO: dont use process.env
 if (process.env.NODE_ENV !== 'test') {
-  const remote = require('remote');
-  const BrowserWindow = remote.require('browser-window');
-  mainWindow = BrowserWindow.getAllWindows()[0];
+  const remote = require('electron').remote;
+  // const BrowserWindow = remote.require('browser-window');
+  // mainWindow = BrowserWindow.getAllWindows()[0];
 }
 
 let ElectronAction = {

app/actions/NicoAction.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const Nico = require('nicolive');
 const AppDispatcher = require('../dispatcher/AppDispatcher');

app/actions/types/CommentActionTypes.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 module.exports = {
   GET_COMMENT: 'get_comment',

app/actions/types/ElectronActionTypes.js

@@ -1,4 +1,4 @@
-'use babel'
+'use strict'
 
 module.exports = {
   RESIZE: 'resize'

app/actions/types/NicoActionTypes.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 module.exports = {
   FETCH_LOGIN_STATUS: 'fetch_login_status',

app/dispatcher/AppDispatcher.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 let {Dispatcher} = require('flux');
 

app/stores/CommentStore.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const assign = require('object-assign');
 const EventEmitter = require('eventemitter3');

app/stores/ElectronStore.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const assign = require('object-assign');
 const EventEmitter = require('eventemitter3');

app/stores/NicoStore.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const assign = require('object-assign');
 const EventEmitter = require('eventemitter3');

app/views/Main.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const React = require('react');
 const NicoAction = require('../actions/NicoAction');

app/views/component/Comment.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const _ = require('lodash');
 const React = require('react');

app/views/component/Connect.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const React = require('react');
 const NicoAction = require('../../actions/NicoAction');

app/views/component/Footer.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const React = require('react');
 const CommentAction = require('../../actions/CommentAction');

app/views/component/Header.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const React = require('react');
 const Toolbar = require('material-ui/lib/toolbar/toolbar');

app/views/component/Login.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const React  = require('react');
 const NicoAction = require('../../actions/NicoAction');

bootstrapper.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 // install babel hooks in the main process
 require('babel-register');
 require('./main.js');

config/Size.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const Immutable = require('immutable');
 

gulpfile.js

@@ -11,17 +11,40 @@ const electron = require('electron-connect').server.create();
 
 gulp.task('serve', function() {
   electron.start();
-  gulp.watch(['./app/**/**/*.js'], electron.reload);
+  gulp.watch(['./app/**/*.js'], electron.restart);
 });
 
 gulp.task('js:lint', function() {
-  return gulp.src(['./app/**/**/*.js', '!node_modules/**'])
+  return gulp.src(['./app/**/**/*.js'])
     .pipe($.eslint())
     .pipe($.eslint.format('stylish'))
     .pipe($.eslint.failAfterError());
 });
 
-gulp.task('js', []);
+gulp.task('js:compile', function() {
+  return gulp.src('')
+    .pipe($.webpack(require('./webpack.config.js')))
+    .pipe(gulp.dest('./bundle/js'));
+});
+
+gulp.task('js:uglify', function() {
+  return gulp.src('./bundle/js/main.js')
+    .pipe($.uglify())
+    .pipe($.rename('main.min.js'))
+    .pipe(gulp.dest('./bundle/js'));
+});
+
+gulp.task('js', function(callback) {
+  return runSequence(
+    ['js:compile', 'js:lint'],
+    'js:uglify',
+    callback
+  );
+});
+
+gulp.task('watch:js', function() {
+  gulp.watch('./app/**/*.js', ['js']);
+});
 
 gulp.task('css:compile', function() {
   return gulp.src('./assets/styl/*.styl')
@@ -51,8 +74,15 @@ gulp.task('css', function(callback) {
   return runSequence(
     'css:compile',
     'css:concat',
-    'css:min'
+    'css:min',
+    callback
   );
 });
 
+gulp.task('watch:css', function() {
+  gulp.watch('./assets/styl/*.styl', ['css']);
+});
+
+gulp.task('watch', ['watch:js', 'watch:css']);
+
 gulp.task('default', ['serve']);

index.html

@@ -4,15 +4,14 @@
     <meta charset="UTF-8">
     <title>こめろん</title>
     <link rel="stylesheet" href="./bundle/css/min/style.min.css" type="text/css" />
-    <script>
-      // install babel hooks in the renderer process
-      require('babel-register');
-      require('./scripts/main');
-    </script>
+    <script src='./bundle/js/main.min.js'></script>
   </head>
 
   <body>
     <div id='come'>
     </div>
   </body>
+  <script>
+    const electron = require('electron');
+  </script>
 </html>

main.js

@@ -1,21 +1,12 @@
-'use babel';
+'use strict';
 
 import app from 'app';
 import BrowserWindow from 'browser-window';
 const size = require('./config/Size');
 
 let mainWindow = null;
 
-app.on('window-all-closed', () => {
-  if (process.platform != 'darwin') {
-    app.quit();
-  }
-});
-
 app.on('ready', () => {
   mainWindow = new BrowserWindow({width: size.get('width'), height: size.get('height')});
   mainWindow.loadURL('file://' + __dirname + '/index.html');
-  mainWindow.on('closed', () => {
-    mainWindow = null;
-  });
 });

package.json

@@ -8,13 +8,15 @@
     "lint": "npm run stylint & npm run eslint ",
     "eslint": "eslint $(git ls-files | grep -e '.js$')",
     "stylint": "stylint ./assets/styl/*.styl",
+    "compile": "gulp js",
     "test": "NODE_ENV=test mocha --timeout 15000 --compilers js:espower-babel/guess test/**/*.js",
     "posttest": "npm run lint",
     "e2e": "NODE_ENV=e2e mocha -t 150000 --compilers js:espower-babel/guess --harmony e2e/nightmare.js",
     "cover": "nyc --reporter=lcov --reporter=text npm run test",
-    "predev": "npm run style",
     "style": "gulp css & npm run stylint",
-    "dev": "gulp serve"
+    "predev": "npm run style & npm run compile",
+    "dev": "gulp serve",
+    "postdev" : "gulp watch"
   },
   "dependencies": {
     "babel-preset-es2015": "^6.3.13",
@@ -32,7 +34,8 @@
     "react": "^0.14.7",
     "react-dom": "^0.14.3",
     "react-material-icons": "^1.0.1",
-    "react-tap-event-plugin": "^0.2.2"
+    "react-tap-event-plugin": "^0.2.2",
+    "request": "^2.65.0"
   },
   "devDependencies": {
     "babel-core": "^6.5.2",
@@ -44,7 +47,8 @@
     "chai": "^3.5.0",
     "electron-connect": "^0.3.7",
     "electron-mocha": "^0.8.0",
-    "electron-prebuilt": "^0.36.0",
+    "electron-prebuilt": "^0.36.8",
+    "electron-rebuild": "^1.1.3",
     "eslint": "^2.0.0",
     "eslint-plugin-react": "^4.0.0",
     "espower-babel": "^4.0.1",
@@ -58,7 +62,10 @@
     "gulp-shell": "^0.5.2",
     "gulp-stylint": "^3.0.0",
     "gulp-stylus": "^2.3.0",
+    "gulp-uglify": "^1.5.3",
+    "gulp-webpack": "^1.5.0",
     "jsdom": "^8.0.4",
+    "json-loader": "^0.5.4",
     "mocha": "^2.4.5",
     "mocha-generators": "^1.2.0",
     "nightmare": "^2.2.0",
@@ -68,6 +75,7 @@
     "run-sequence": "^1.1.5",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
-    "stylint": "^1.3.6"
+    "stylint": "^1.3.6",
+    "webpack": "^1.12.14"
   }
 }

scripts/main.js

@@ -1,7 +1,7 @@
-'use babel';
+'use strict';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+const React = require('react');
+const ReactDOM = require('react-dom');
 const Main = require('../app/views/Main');
 
 window.onload = function() {

test/actions/CommentAction_spec.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const chai = require('chai');
 const assert = require('power-assert');

test/actions/NicoAction_spec.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const chai = require('chai');
 const {assert} = require('chai');

test/setup.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 let {jsdom} = require('jsdom');
 

test/stores/CommentStore_spec.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const chai = require('chai');
 const assert = require('power-assert');

test/stores/NicoStore_spec.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const assert = require('power-assert');
 const {sandbox} = require('sinon');

test/views/Main_spec.js

@@ -1,4 +1,4 @@
-'use babel';
+'use strict';
 
 const assert = require('power-assert');