pri 知识点

• pri github：https://github.com/prijs/pri

• 添加路由后动态导入，使用的是 react-loadable：https://github.com/jamiebuilds/react-loadable。

• npx pri init 等价于 ./node_modules/.bin/pri init

• 运行pri init时，选择项目类型（有3种：Project、Component、Pri Plugin）：

? Choose project type (Use arrow keys)
❯ Project
　Component
　Pri Plugin

• 命令含义：

执行命令的2种方式（项目命令、全局命令）：

1. 在项目里安装 pri，执行 package.json 中 scripts 部分相应命令：npm run xxx；
2. 全局安装pri，在项目根目录下执行命令：pri xxx。

table th:first-of-type {
width: 150px;
}

命令	含义
pri test	代码覆盖率报告，使用的插件：https://github.com/avajs/ava
pri dev	即时编译开发环境（在 src/pages 或 src/layouts 中新建文件，新的路由会自动添加，不需要重新运行这个命令）
pri docs	开启docs server查看编写的组件（是否实时编译，待确定）
pri build	打包
pri bundle	报错：ERROR in Entry module not found: Error: Can't resolve '/Users/cag/Documents/VSCodeProjects/pri_demo/src/index.tsx' in '/Users/cag/Documents/VSCodeProjects/pri_demo' at /Users/cag/Documents/VSCodeProjects/pri_demo/node_modules/pri/built/utils/webpack.js:88:27，可能原因：点击了 Toggle dashboard 里的 Layout（在src文件夹下产生了layouts目录）、404（产生了pages目录和目录下的404.tsx）、Config（在项目主目录下产生了 pri.config.ts 文件），文件结构变了，找不到src/index.tsx 了。
pri preview	预览页面（预览首页正常，如何预览其他页面？）
pri analyse	使用 Webpack Bundle Analyzer 分析各模块占用大小
tslint --fix './src/**/*.?(ts|tsx)' && prettier --write './src/**/*.?(ts|tsx)'	用 tslint 和 prettier 格式化代码

• 项目结构分析

一级目录	二级目录	三级目录	说明
src
src	layouts		在 src/pages 或 src/layouts 中新建文件，新的路由会自动添加，不需要重新运行pri dev命令
src	pages		在 src/pages 或 src/layouts 中新建文件，新的路由会自动添加，不需要重新运行pri dev命令
coverage			运行pri test产生的代码覆盖率报告，所在的文件夹
dist			运行pri build打包产生的代码，所在的文件夹
.temp			项目运行时产生的一些文件

• 文件 pri.config.js 配置：https://prijs.github.io/pri-docs/project/config/

import { ProjectConfig } from 'pri/client';
export default {} as ProjectConfig;

配置项	类型	默认值	说明
title	string	'pri'	html文件的<title>
devPort	number	[Auto get free port]
distDir	string	'dist'
customEnv	{ [key: string]: any }	undefined
routes	IRoute[]	[]	当这个路由配置存在时，将不处理 pages 文件夹