craco-plugin-multipage
Version:
React multi page craco plugin
247 lines (190 loc) • 8.38 kB
Markdown
# craco-plugin-multipage
Cracte-React-App craco 多页面插件
[Demo](https://github.com/helloskynet/react-multipage-demo)
## 使用 Usage
1. 创建 App
`npx create-react-app my-app`
1. 安装 @craco/craco
能看到这个插件，你一定也知道@craco/craco。
安装[@craco/craco](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation)
```
npm i -D @craco/craco
```
安装之后记得根据@craco/craco 文档，修改 package.json 中的 scripts
1. 安装 craco-plugin-multipage
```
npm i -D craco-plugin-multipage
```
1. 配置@craco/craco
添加 craco.config.js
```js
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {},
},
],
};
```
1. 调整目录结构
由
```
my-app
├── node_modules
├── craco.config.js
├── package.json
└── src
├── App.css
├── App.js
├── index.js
...
```
调整为
```
my-app
├── node_modules
├── craco.config.js
├── package.json
└── src
├── page1
├── App.css
├── App.js
├── index.js
...
├── page2
├── App.css
├── App.js
├── index.js
...
└── page3
├── page4
├── App.css
├── App.js
├── index.js
...
└── page5
├── App.css
├── App.js
├── index.js
...
```
**src 文件夹下包含 index.js 的会被认为是一个页面** 当一个文件夹包含 index.js 时，其内部仍存在页面时，其内部的页面会被忽略；例如，如下目录结构，page2 将会被忽略。如果一个文件夹同时包含文件和文件夹且不存在 index.js 文件，则整个文件夹都会被忽略。
```
my-app
├── node_modules
├── craco.config.js
├── package.json
└── src
├── page1
├── App.css
├── App.js
├── index.js
...
├── page2
├── App.css
├── App.js
├── index.js
...
```
1. 启动
`npm run build / start`
## Options
### options
| 属性 | type | default | desc |
| ------------------------ | ------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| htmlOutputDir | string | "pages" | html 的输出目录，相对于 build 目录 |
| pages | string | "" | 指定启动的页面，默认全部，多个时用英文逗号分隔，支持命令行 |
| ignore | string | "" | 忽略的页面，优先级高于 pages，支持命令行。 |
| pageTitle | object | {} | 页面的 title 分页面配置 |
| defaultTitle | String | "React App" | 页面默认的 title，pageTitle 匹配不到或者未配置时使用。 |
| HtmlWebpackPluginOptions | {object\|Function} | {} | HtmlWebpackPlugin 的配置，为 Object 时可以覆盖除 title、chunks、filename 之外的其他属性；为 Function 时,每个页面都会调用它，入参为原 HtmlWebpackPlugin 的 Config 需要返回一个新的 HtmlWebpackPlugin 的 Config，关于[HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin)配置 |
### htmlOutputDir
编译生成的 html 的输出目录，相对于 build 目录，默认为 pages。
### pages
指定编译的页面，多个页面时通过英文逗号分隔。
使用[Path-to-RegExp](https://github.com/pillarjs/path-to-regexp)匹配。
```js
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
pages: "page1,page3/page4",
},
},
],
};
```
也可以通过命令行指定编译的页面，命令行参数和 options 中的参数将会合并，无优先级区分。
```cmd
npm run build -- --pages page1,page3/(.*)
```
上面的命令将会会编译 page1 和 page3 目录下的 page4,page5
### ignore
指定无需编译的页面，多个页面时通过英文逗号分隔，规则同上。
```js
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
pages: "page1",
ignore: "page3/(.*)",
},
},
],
};
```
优先级高于 pages ，故**ignore 和 pages 同时命中同一个页面时，该页面将会被忽略。** 也可以通过命令行指定，命令行参数和 options 中的参数将会合并。
```cmd
npm run build -- --pages page1,page3/(.*) --ignore page3/page4
```
上面的命令将会编译 page1 和 page3 目录下的 page5，而忽略 page3/page4。
### pageTitle 和 defaultTitle
页面的 title，默认为{}，pageTitle 如果页面未匹配到 title，则使用 defaultTitle。
```js
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
pageTitle: {
page1: "1号页面",
"page3/page4": "3/4号页面",
},
defaultTitle："React App"
},
},
],
};
```
要使用 title 属性，需要将模板 public/index.html 中的 title 部分修改为
```html
<title><%= htmlWebpackPlugin.options.title %></title>
```
### HtmlWebpackPluginOptions
HtmlWebpackPlugin 的配置，为 Object 时可以覆盖除 title、chunks、filename 之外的其他属性。
为 Function 时,每个页面都会调用它，入参为原 HtmlWebpackPlugin 的 Config 需要返回一个新的 HtmlWebpackPlugin 的 Config,可以覆盖所有的属性，关于[HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin)配置。
```js
// craco.config.js
const CracoPluginMultipage = require("craco-plugin-multipage");
module.exports = {
plugins: [
{
plugin: CracoPluginMultipage,
options: {
HtmlWebpackPluginOptions: (config) => config,
},
},
],
};
```