# alcor a mizar-based react project compile cli tool npm install -g alcor ## alcor辅助mizar应用打包编译。应用目录结构应为： -config 用于存放配置文件的目录 -app.json 用于配置应用的运行时信息，比如该应用的node服务启动端口、cdn地址等 -configure.json 用于配置应用的编译配置，比如配置eslint plugin、配置stylelint plugin、配置less-loader等 -src 应用代码源文件目录 -isomorphic 同构内容所在目录，组件会被在客户端或服务端执行，需要注意执行环境特有能力的使用 -index.ts 客户端启动入口 -routers 应用的客户端路由文件所在目录 -index.tsx -pages 页面所在的目录 -pageA 一个采用类组件形式开发的页面级redux组件 -index.tsx 页面组件入口文件 -index.less 页面组件样式文件 -action.ts 页面组件内所有action定义 -initialState.ts 页面组件reducer需要使用的初始值定义 -reducer.ts 页面组件reducer定义 -interface.ts 页面组件内所有的ts定义文件 -pageB - ... -tsconfig.json -public 存放一些非模块化的的内容，每个文件会被直接用link或script引入 -server 应用的服务端代码 -apis 服务端node api存放目录，规则是请求路径以/api/开头，文件名为方法名 -api-name.ts -index.ts 服务端启动入口 -typings -externals.d.ts 额外需要的类型声明 -.eslint.config.js -.stylelintrc.json -package.json -tsconfig.json ### 1. 利用cli创建一个应用，包含文件、目录、配置 * alcor create your-project-directory-path，在your-project-directory-path目录中创建一个应用，包含必要的文件、配置 ### 2. 编译、打包、调试一个应用 * alcor build 产出production环境的编译产出 * alcor build --debug 产出development环境的编译产出 * alcor build --verbose 编译过程在终端中打印出详细的编译过程、编译状态的信息 * alcor build --server 会启动开发调试服务器，启动并连接node inspector用于调试node端代码 * alcor build --hotReload 在同时指定--debug时，会启用客户端资源在浏览器中的热更新.**暂时不支持状态保持** * alcor build --analyz 产出webpack stats模块分析文件，如果联合--debug使用，会启动分析服务器并自动用默认浏览器打开分析页面 * alcor build --watch 启动watch进程监听文件变更重新编译 * alcor build --ost 传递该参数不会编译产出isomorphic、server等内容，该参数表示仅做standalone的编译：从./config/configure.json中读取standalone配置用于编译./src/standalone目录的文件 * alcor build --notify 开启编译过程中关键信息系统级提示框的提示功能 * 可以组合使用比如 alcor build -ds 表示编译开发环境编译并启动开发调试服务器， * 0.1.39开始将debug能力拆解，debug不在默认监听文件变化，新增watch用于监听文件变化 * 仅debug、watch、server可使用缩写，其他选项不可缩写，必须使用--的形式 ### 3. 应用根目录中需要存在config文件夹，里面包含两个文件：app.json, configure.json。由于configure.json是用于打包编译的配置，编译产出dist目录中，只会包含用于发布的内容，因此不会包含configure.json * app.json用来配置应用信息和运行时信息 ``` "name": "alcor-template-app", # 应用名称 "port": 8889, # 应用在服务端启动时的端口号 "cdn": "/", # cdn 域名加根目录 "assetsPathPrefix": "static/" # 静态资源路径前缀 ``` * configure.json用来配置打包编译过程中的一些配置 ``` "stylelint": true, # 启用stylelint，默认启用，默认配置对应用根目录src目录中的.css、.less、.scss、.sass文件生效 "eslint": true, # 启用eslint，默认启用，默认配置对应用根目录src目录中的.ts\.tsx\.js\.jsx文件生效 "isPrefixProjectName": true, # 将app.json中配置的name用于css module样式名前缀 "postcss-loader": {}, # 配置插件option配置 "less-loader": {}, # 配置插件option配置 "sass-loader": {}, # 配置插件option配置 "serverapi": true, # 配置是否产出/src/server/apis目录的服务端api内容 "hotReload": { "host": "http://127.0.0.1", "port": 9911 }, # 配置客户端热更新 "proxy": [{}], # 配置debug模式的接口代理转发规则 "standalone": { "externals": { "jquery": "jQuery" } } # 配置独立打包信息，参见下面第6点 ``` ### 4. 版本0.1.32(含)以前connect用法：connect()()()，0.1.33(含)以后用法：connect()()，会对第二次调用的中间两个缺省参数注入默认值 ### 5. 版本0.1.33(含)以前支持应用路由配置语法为react-router-config v5语法，0.1.34(含)以后**只支持**react-router v6 useRoutes语法，[两个配置区别点击此处](https://reactrouter.com/docs/en/v6/upgrading/v5#use-useroutes-instead-of-react-router-config)。 ### 6. 版本0.1.38开始支持standalone形式编译产出(ProjectBuild和PackageBuild都支持)，standalone代表每个standalone的文件之间没有公共文件，即哪怕在standalone中的文件有很多共同的内容也不会提取runtime、lib这种公共文件，他们是各自独立的，可以想象成每个standalone的文件就是一个第三方库，可以放在cdn，然后直接在html中以```