ticket-client

Step 1

1. npm install

Dev Mode

1. npm run build-dll
2. npm start
3. open browser and type http://localhost:3000.

Prod Mode

1. edit src/app/config.js

2. build

• 逐步执行以下命令

npm install
npm run build-dll
npm run build-client
npm run build-server
npm run copy-files

或者执行这个脚本

build/shell/build-prod.bat

1. 启动Node服务

node ./bin/server/server.js 3000

1. 最后打开浏览器访问 http://localhost:3000.

设计规范

• 关键词

routes, pages, layouts, components, actions, reducers 

• 整体架构示意

• 代码结构

    ---node_modules
    ---bin---(es5)
         |---client
         |---common
         |---server
    ---config
         |---dll.config.js
         |---webpack.config.js
         |---webpack.config.product.js
    ---public
         |---static---
         |      |---lib.js
         |      |---bundle.js
         |      |---bundle.css
         |      |---reset.css
    ---src
         |---app
             |      |---config
             |      |---modules
             |      |      |---demo
         |      |      |      |---pages
         |      |      |      |---models
         |      |      |      |---config
         |      |      |      |---components
         |      |      |---common
             |      |---store
             |      |---utils
             |---browser
         |---server 	    
    ---.babelrc
    ---cmrh.conf.js
    ---package.json
    ---README.md

命名规范：

1. 属于定义class的文件或文件目录名规则都是首字母大写跟着驼峰，若是目录内部的文件，除了index.js其他如样式文件的命名跟class名保持一致 比如：

   • MyComponent.js
   • OtherComponent/
     • index.js
     • OtherComponent.css

2. 除了class之外的文件或目录的命名都采用 小写单词+减号连接 比如：

   • my-constants.js
   • my-utils
     • my-request.js
     • my-helper.js

3. Model虽然不是class，也跟class一样的命名规则

4. modules目录下第一层目录表示模块名字，以小写单词+减号连接，模块内部的子目录结构也要求规范 比如： /modules

   • demo
     • config
   • routes.js
   • models.js
   • components
     • Header
       • Header.css
       • index.js
     • Nav
       • Nav.css
       • index.js
     • DemoForm
       • DemoForm.css
       • index.js
       • pages
         • home
           • home.css
       • index.js
         • about
           • about.css
       • index.js
       • models
         • UserDataModel.js
         • SessionDataModel.js
         • MessageDataModel.js
         • AuthDataModel.js
         • HomeUIModel.js
         • HeaderUIModel.js
         • NavUIModel.js
   • zbus-demo
   • hello-world

笔记

• Page应该是被设计为最顶层的（路由器）组件
• 任何一种Action的发起引起的State变化必然会引起Page组件及以下所有组件的rerender
• 特别注意在使用[].map进行React组件构建时，其属性key非常重要，它决定了rerender结果是否更新到真实dom上面
• 关于babel preset

1. preset = plugin + plugin ...
2. stage-0是对ES7一些提案的支持 ,它包含stage-1,2,3的所有功能，同时还另外支持两个功能插件:transform-do-expressions,transform-function-bind
3. babel plugin runtime的加入会导致代码中 export * from 'x'报错（Babel编译后的代码加了runtime的一些库，导致modules undefined报错，去掉runtime后，编译后的代码干净无错）

• 惊天大BUG，在css/less文件里直接使用./xxx.svg会报找不到文件的错, 改成相对目录就没问题：

.logo { background: url('./logo.svg') }// 报错
.logo { background: url('../{parent_dir}/logo.svg') }// 正常
// https://stackoverflow.com/questions/34480228/how-to-load-svg-images-in-webpack