add test page

cloudyan · cloudyan · commit 40d62db72f91 · 2015-10-10T09:56:35.000+08:00
diff --git a/app/js/app-routes.jsx b/app/js/app-routes.jsx
@@ -0,0 +1,40 @@
+"use strict"
+
+import {Route, Router} from 'react-router'
+import createHistory from 'history/lib/createHashHistory'
+
+const history = createHistory({ queryKey: false })
+let menulist = []
+
+// function addMenu(list) {
+//   list.forEach(function (menu, index) {
+//     if (menu.component) {
+//       menulist.push(
+//         <Route key={index} path={menu.path} component={menu.component} />
+//       )
+//     }
+//   })
+// }
+// require('./menulist').forEach(function (list) {
+//   addMenu(list)
+// })
+
+// import Master from './pages/master.jsx'
+// import Home from './pages/home.jsx'
+import Home from './test.jsx'
+
+/*
+<Route path="/home" component={Home} />
+{menulist}
+<Route path="/build" component={require('./pages/build.jsx')} />
+*/
+
+const AppRoutes = (
+  <Router history={history}>
+    <Route path="/" indexRoute={{component: Home}} component={Home}>
+
+    </Route>
+  </Router>
+)
+
+export default AppRoutes
diff --git a/app/js/app.jsx b/app/js/app.jsx
@@ -0,0 +1,43 @@
+"use strict"
+
+// global.uiRequire = function (src) {
+//   if (src) {
+//     return require('../../src/' + src)
+//   } else {
+//     return require('../../src/')
+//   }
+// }
+//
+// import ReactDOM from 'react-dom'
+// const AppRoutes = require('./app-routes.jsx')
+//
+// ReactDOM.render(
+//   AppRoutes,
+//   document.getElementById('body')
+// )
+
+import ReactDOM from 'react-dom'
+const AppRoutes = require('./app-routes.jsx')
+
+console.log('helloooo')
+
+ReactDOM.render(
+  AppRoutes,
+  document.body
+)
+
+// document.addEventListener('DOMContentLoaded', function() {
+//   Router.run(routes,
+//     Router.HashLocation,
+//     function(Root, state) {
+//       React.render(<Root />, document.body);
+//     });
+// });
+
+
+// static files
+// require('file?name=index.html!../index.html')
+// require('../json/countries.json')
+// require('../json/form.json')
+// require('../json/text-value.json')
+// require('../json/tree.json')
diff --git a/app/js/test.jsx b/app/js/test.jsx
@@ -0,0 +1,18 @@
+'use strict';
+
+
+import React from 'react'
+
+console.log('tests')
+
+var Component = React.createClass({
+  render: function() {
+    return (
+      <div className="test">
+        <p>test</p>
+      </div>
+    );
+  }
+});
+
+export default Component
diff --git a/gulpfile.js b/gulpfile.js
@@ -11,6 +11,7 @@ var del = require('del');
 var runSequence = require('run-sequence');
 var browserSync = require('browser-sync');
 var browserify = require('browserify');
+var babelify = require('babelify');
 var watchify = require('watchify');
 var source = require('vinyl-source-stream');
 var buffer = require('vinyl-buffer');
@@ -30,6 +31,7 @@ var AUTOPREFIXER_BROWSERS = [
 ];
 
 var paths = {
+  bootjs: 'app.jsx',
   dist: {
     base: 'dist',
     js: 'dist/js',
@@ -105,7 +107,7 @@ gulp.task('copy:venders', function () {
     .pipe($.size({title: 'copy:venders'}));
 });
 // 拷贝相关资源
-gulp.task('copy', function () {
+gulp.task('copy', ['copy:venders'], function () {
   return gulp.src([
     'app/**/*',
     '!app/*.html',
@@ -168,12 +170,14 @@ gulp.task('styles', function () {
     .pipe($.size({title: 'styles'}));
 });
 
-// 打包 Common JS 模块，此处使用 ES6 的话，需要调整设置
+// 打包 Common JS 模块，此处使用 ES6 的话，选用 babel 编译 ES6，需要调整设置
+// TODO: 是否将 browserify 改为使用 webpack 来实现
 var b = browserify({
   cache: {},
   packageCache: {},
-  entries: ['./app/js/app.js'],
+  entries: [('./app/js/' + paths.bootjs)],
   debug: !isProduction,
+  // extensions: [".jsx"],
   transform: ['babelify']
 });
 
@@ -204,12 +208,13 @@ b.transform('browserify-shim', {global: true});
 
 var bundle = function() {
   var s = (
-    b.bundle()
+    b.transform(babelify).bundle()
       .on('error', $.util.log.bind($.util, 'Browserify Error'))
-      .pipe(source('app.js'))
+      .pipe( source(paths.bootjs) )
       .pipe(buffer())
       // .pipe($.sourcemaps.init())
       // .pipe($.sourcemaps.write("."))
+      .pipe($.rename('app.js'))
       .pipe(gulp.dest(paths.dist.js))
       .pipe($.size({title: 'script'}))
   );
@@ -261,13 +266,13 @@ gulp.task('watch', function() {
 // 启动预览服务，并监视 Dist 目录变化自动刷新浏览器
 gulp.task('dev', ['default', 'watch'], function () {
   browserSync({
-    // port: 5000, //默认3000
-    // ui: {    //更改默认端口weinre 3001
-    //     port: 5001,
-    //     weinre: {
-    //         port: 9090
-    //     }
-    // },
+    port: 5000, //默认3000
+    ui: {    //更改默认端口weinre 3001
+        port: 5001,
+        weinre: {
+            port: 9090
+        }
+    },
     // server: {
     //   baseDir: 'dist/docs'
     // },
@@ -284,7 +289,7 @@ gulp.task('dev', ['default', 'watch'], function () {
 gulp.task('default', function (cb) {
   console.log('生产环境：' + isProduction);
   //runSequence('clean', ['styles', 'jshint', 'html', 'images', 'copy', 'browserify'], cb);
-  runSequence('clean', ['styles', 'html', 'images', 'copy:venders', 'copy', 'browserify'], cb);
+  runSequence('clean', ['styles', 'html', 'images', 'copy', 'browserify'], cb);
 });
 
 
diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
   },
   "browser": {},
   "browserify-shim": {
+    "react-dom": "global:ReactDOM",
     "react": "global:React"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -105,6 +105,7 @@`
`105`	`105`	`},`
`106`	`106`	`"browser": {},`
`107`	`107`	`"browserify-shim": {`
	`108`	`+ "react-dom": "global:ReactDOM",`
`108`	`109`	`"react": "global:React"`
`109`	`110`	`}`
`110`	`111`	`}`