# 脚本

在项目目录内输入

- `server`启动本地开发服务
- `test`执行打包并部署到测试环境
- `prod`执行打包并部署到线上环境

1. 编译打包放到源代码目录下的构建目录（根据配置，默认是 build/product）
2. 把构建目录下的文件 git add,git commit, git push origin master
3. 把构建目录下的文件推送到 cdn。
4. 启动一个本地 server，使用构建的 index.html，代理到线上环境。目的是查看打包文件是否正确，是否正确推送 cdn。
5. 会有一个询问是否部署 ndp，输入回车会自动部署线上环境 ndp。

- `jest`执行单元测试，执行 src 目录下所有`/.(test|spec).jsx?/`
- `analyzer`打包分析
- `domain`创建 domian 下 domainName 文件夹及相应文件。

# 开发控制台

- 访问本地服务`/\_mg` 路径，进入控制面板。
- 点击 dev，test，online 选择代理目标
- 点击重新登录，重新登录获取 cookie。

# 打包信息

- 打包后，文件名如果是蓝色，表示文件未更改，如果是黄色，表示文件有更新。

# 环境变量

- 所有可用环境变量定义在 [devServer|prod]/set/envSettings.js 中
- 可以在.env 中配置环境变量，比如`NAME=bjzhangchengsi`，也可以在 npm 命令中配置，格式如下
  `npm test --NAME=bjzhangchengsi`npm 命令中配置的优先级高于 env 中的。

# 集成 vscode

1. 可直接在 vscode 内实时调试 js 代码。

启动开发 server 后，debug 面板选择 Chrome，点击箭头或 F5,支持在 vscode 中直接 debug 程序。

2. 继承通用配置。
3. 支持 settings 里配置的 webpack alias 模块路径。

# 目录结构

    /ci                             脚手架相关
    /build                          打包输出目录
    /mock                           模拟数据存放目录
    /public                         无需打包静态文件(favicon,index.html等)
    /src                            源代码目录
        /asset                      静态文件
        /common                     只存放各子系统必须的公共组件
            /router                 路由处理
                routeSet.js         路由树,自动去domain目录下的routeKey文件夹去加载路由组件
            /app                    整体包装组件
            /moduleImport           导入模块组件，用于动态或整体导入domain下的子系统。
                index.js            在这里改变注释改变动态或整体导入
                contextImport.js    整体导入，自动导入domain下所有index.js文件
                dynamicImport.js    动态导入，自动导入domain/*/index.js文件
        /domain                     业务逻辑，每个文件夹代表一个子系统，子系统间要保持尽量隔离（不互相引用模块），该文件夹下不要存放不用的文件夹，会自动打包进去。
    /index.js                       打包入口js
    /store.js                       redux仓库
    /rootReducer.js                 根reducer
    /registerServiceWorker.js       serviceWork配置

## domain 目录结构

以 common/router 为例，domain 下的文件夹结构和这个一致。其中 selector.js,/presentation /container 可根据实际情况创建

    /index.js 引入路由组件和 reducer 文件，并使用 connect 连接组件
    /reducer.js
    /router.jsx 入口组件。
    /action.js
    /actionType.js
    /selector.js

**注意 domain 目录下不要存放不用的代码，会被打包进去，影响大小和速度**

## 动态导入和整体打包

自动解析`domain/xx/index.js`文件并打包。
可通过修改`src/common/moduleImport/index.js`中的注释实现一键切换整体导入和动态导入。

## 关于动态导入的模块

通过配置[request]，实现 chunk 名称和文件名一致。