@jdthfe/blueprint
v0.0.1
Published
fast create a app
Downloads
2
Readme
BLUEPRINT
Welcome to the Blueprint documentation!
Getting Started
Blueprint is an way to create specific applications. It offers a modern build setup with no configuration
Quick Start 快速开始
全局安装 blueprint（已经安装的开发者可以跳过此步骤）
jnpm install blueprint -g在命令行中进入需要创建项目的文件夹（本例为 ~/example)
// 查看可用的模板
// 将会在当前目录下生成 blueprint-list.md
// 包含各个模板的介绍和使用说明
blueprint md// blueprint <templateName> [projectName] [projectDir]
// templateName 模板名
// projectName 项目名
// projectDir 项目文件夹名称，默认为 project
blueprint init my-app react-0根据内部上线流程，以及开发模式， ~/example 文件夹下应该存在有 blueprint-common 和 static.init 项目。用以提供公共组件和静态资源。(不同模板可能存在不同情况，具体见 blueprint-list.md)
init 执行之后，将生成如下结构的目录
example
├── blueprint-list.md
├── blueprint-common
├── static.init
├── project
│ ├── my-app
│ ...
...进入 blueprint-common 中安装依赖并退回到 ~/example 目录
cd blueprint-common && yarn && cd ..进入项目中且安装依赖
cd project && yarn启动本地服务器，开发模式 start devSever
yarn s打包发布 build
yarn bStructure 目录结构
After creation, your project should look like this:（不同模板生成的目录结构可能有一定差距）
初次使用重点关注 「config.js 配置文件」和 「project 项目源码」即可
my-app
├── package.json
├── README.MD
├── config.js // 核心配置文件
├── tsconfig.json // typescript 配置
│
├── .babelrc.js // 其他插件配置，如何配置请自行百度文件名
├── .commitlintrc.js
├── .eslintignore
├── .eslintrc,js
├── .gitignore
├── .lintstagedrc.js
├── .prettierignore
├── .prettierrc.js
├── .stylelintrc.js
│
├── build // webpack 配置文件
│ ├── build.after.js
│ ├── helpers.js
│ ├── midware.js
│ ├── webpack.config.js
│ ├── webpackDevServer.config.js
│ └── loaders // 可以在此文件中中定义自己的 loader
│ └── vm-loader
│ ├── lib // loader loader 依赖置于此，防止代码检查
│ └── index.js
│
├── common // 公用组件和方法，映射 blueprint-common 文件夹。详见补充说明
│ ├── ...
│ ...
│
├── dist // 项目输出的目录，用于映射域名对应的静态资源目录。详见补充说明
│ ├── ...
│ ...
│
├── project
│ │
│ ├── api // 接口相关
│ │ ├── index.tsx // 接口整合
│ │ ├── html // 首屏模拟数据
│ │ └── schema // 接口 mock 和 type
│ │ ├── [apiName.json]
│ │ ├── [apiName.tsx]
│ │ ...
│ ├── src // 项目源码
│ │ ├── index.tsx // 项目入口
│ │ ├── App.tsx
│ │ ├── index.vm // 模板，可以使用 vm | ejs | html
│ │ ├── images // 图片
│ │ ├── types // 类型
│ │ ├── scenes // 场景，详见补充说明
│ │ ... // 可以自由创建需要的文件夹
│ │
│ └── static // 项目级别的纯静态资源，build 时会完全不改动的粘贴
...补充说明
对特殊文件夹的补充说明
common
在 yarn s 或 yarn b 过程中，会自动粘此文件夹中的所有文件到 blueprint-common 中。（请勿重名，防止覆盖）
模板中已经配置好了对应的路径依赖，可以通过 import [modulesName] from "@common/*" 的方式引用
注意事项：
请无视 blueprint-common 中的依赖报错，请勿在 blueprint-common 中安装任何依赖。通用组件所需的依赖和声明文件， 在对应项目中安装即可。
请勿直接修改 blueprint-common 中的任何文件。如果对应通用组件报错，webpack 的错误提示会指向 blueprint-common。此时应该修改本地 common 中的对应文件，通过框架的自动粘贴覆盖错误代码。
如果是打包处理过，不需要任何检查的代码。请置于 common-modules 文件夹中。
提交代码遵循 commitLint 规范
公共组件开发完成之后可以删除本地 common
目录结构：
blueprint-common
├── package.json
├── .gitignore
├── .commitlintrc.js
├── README.MD
├── common_modules // 放置编译过的通用组件
├── manifest // react dll 相关 mainfest
├── styles // 通用属性
├── use // 通用 use
├── utiles // 通用 utils
...dist
项目输出的目录，用于映射域名对应的静态资源目录。此例中：
dist 文件对应 mstatic.jd.co.th 域名所映射的，静态资源服务目录 static.init/src/main/webapp
注意事项：
在 html 中使用 script 或者 link 标签引用的代码才建议放置于此文件夹下。
请手动拷贝除项目文件夹以外的代码到
static.init中。此文件夹只用于说明目录结构和存放项目打包代码。且只有项目打包代码会在 build 之后自动被拷贝到static.init中。
目录结构：
dist
├── static
│ ├── vendor // react dll 相关 vendor
│ ...
│
├── [project]
├── my-app
│ ├── css
│ ├── images
│ ├── js
│ ├── static
│ └── index.html
...schema
相当于通常项目中的 pages 层级。不同之处在于 schema 鼓励嵌套
假设有如下业务需求：
订单页，区分为 A 类订单和 B 类订单。
两种订单页面数据和逻辑有一定差异，但不是完全不同
目录结构容易被设定为如下两种：
不同订单使用单独页面，订单页的通用逻辑被迫提升到项目级别
pages ├── commonComponents │ ├── component1.tsx // A 和 B 均用到的通用组件 │ ... ├── Order A │ ├── Order A.tsx │ ├── component2.tsx │ ... ├── Order B │ ├── Order B.tsx │ ├── component3.tsx │ ... ...- 不同订单使用同一页面，各自页面的组件归属不明
pages ├── Order │ ├── Order A.tsx │ ├── Order B.tsx │ ├── component1.tsx // A 和 B 均用到的通用组件 │ ├── component2.tsx │ ├── component3.tsx │ ... ...
推荐使用 schema 区分
虽然层级和文件夹数量变多，但业务逻辑更清晰，方便后续维护。可以轻易的增加 Order C，甚至分割出 Order B.1 和 Order B.2
schema
├── Order
│ ├── Order.tsx
│ ├── components
│ ├── schema
│ │ ├── Order A
│ │ │ ├── Order A.tsx
│ │ │ ├── components
│ │ │ ...
│ │ ├── Order B
│ │ │ ├── Order B.tsx
│ │ │ ├── components
│ │ │ ├── schema
│ │ │ │ ├── Order B.1
│ │ │ │ ├── Order B.2
│ │ │ ...Development Process 开发流程
1. 代码校验
项目预设有严格的格式校验和提交检查。如果运行过程中有任何报错，将无法编译甚至提交。
为了帮助更好的开发，请安装对应插件帮助代码自动格式化。（下列步骤基于 vscode)
关闭所有格式化相关插件，防止冲突。
安装并开启 eslint 。建议选择「开启（工作区）」，防止影响其他项目，下同。
安装并开启 prettier - Code fomatter
安装并开启 stylelint
项目最外层新建
.vscode/settings.json文件，内容如下{ "files.associations": { "*.ts.snap": "html" }, "editor.formatOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ], "prettier.stylelintIntegration": true }重启 vscode 之后，即可享受自动格式化代码，和部分 bug 自动修复的快感了。
2. 本地启动
如果是 OS 系统需要加 sudo
yarn s项目会在本地 127.0.0.1:80 端口启动服务。
有任何访问本地的资源请求，将通过以下 4 步
直接请求，如果失败请求下一步
映射到项目 dist 文件夹中，删除版本号和 .min 等标识。失败请求下一步
映射到
static.init/src/main/webapp文件夹，删除版本号和 .min 等标识。失败请求下一步判断请求 host，如果为本地，则返回资源未找到。否则请求 host 原本地址。
因此，可以通过修改 host 映射的方法。替换线上资源为本地文件
例如添加 host： 127.0.0.1 beta-mstatic.jd.co.th
启动本地 my-app 项目
资源 http://beta-mstatic.jd.co.th/my-app/js/index_1_0.js 将被服务器捕获，经过如下处理
未找到本地请求，下一步
映射到项目 dist 文件夹中，删除版本号和 .min 等标识，映射成功！
资源 http://beta-mstatic.jd.co.th/static/vendor/react_core.min.js 将被服务器捕获，经过如下处理
未找到本地请求，下一步
映射到项目 dist 文件夹中，删除版本号和 .min 等标识，失败，下一步。
映射到
static.init/src/main/webapp的 dist 中，删除版本号和 .min 等标识，映射成功！
Tips 如果映射成功，控制台将输出 Development Mode !，在浏览器中观察对应资源的源码，也将增加如下格式的注释。
/**
* 指向本地文件
* /Users/name/Files/Work/project/my-app/dist/my-app/js/index.js
*/3. 项目打包
如果是 OS 系统需要加 sudo
yarn b在 config.js 中通过修改 version 字段更改版本号，默认为 1.0
项目将在 dist 文件架下，生成对应项目名的打包后代码，并且在 js 和 css 文件之后附带 _1_0 形式的版本号。
打包成功之后，将执行 build/build.after.js 拷贝 dist 文件夹中的项目打包文件到 static.init/src/main/webapp 中
4. 代码提交
代码提交之前会经过如下步骤：
按照
.lintstagedrc.js中的规则匹配所有提交的文件。进行对应的 eslint、prettier、stylelint 和 typescript 校验以及自动格式化。通过之后进行下一步。项目预制 commitLint，所有提交必须符合规定格式，规则如下。
| Commit type | Description | | ----------- | ------------------------------------------------------------------------------------ | | build | 主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交 | | ci | 主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交 | | docs | 文档更新 | | feat | 新增功能 | | merge | 分支合并 Merge branch ? of ? | | fix | bug 修复 | | perf | 性能, 体验优化 | | refactor | 重构代码(既没有新增功能，也没有修复 bug) | | style | 不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑) | | test | 新增测试用例或是更新现有测试 | | revert | 回滚某个更早之前的提交 | | chore | 不属于以上类型的其他类型 |
任意步骤失败都将导致代码提交失败