1. The background

  • Multiple systems share a component library
  • Component library is difficult to manage at present. Component changes will affect the display and interaction of components in multiple systems at the same time, and it is difficult for developers to control the impact of component changes
  • The component library is frequently used in the project, but it is cumbersome to consult the component API, which requires reading the component code
  • It is difficult to intuitively and comprehensively understand the functions of each component. It costs a lot to learn new components, and new functions of components cannot be quickly understood by others in the group

2. Bisheng is introduced

Bisheng is a tool to turn Markdown into a React one-page site, support simple personal blogs, quickly build and manage project interface documentation, support component demos and more complex content with plug-in extensions.

Bisheng is used in the component library to basically solve the problem described in the background.

The Ant-Design document is implemented based on Bisheng.

See using the project code: ant-Design

3. The installation

npm install --save-dev bisheng

Copy the code

Have to rely on

  • bisheng

Other non-essential dependencies (website related, self-installed as required)

  • Bisheng-plugin-description // Used to extract the description of MarkDown
  • Bisheng-plugin-toc (Table of Content)
  • Bisheng-plugin-react // Write react code in Markdown, which will be converted to react Element
  • bisheng-plugin-antd
  • .

4. Configure resolution

4.1. Package. json add command:

"site": "cross-env ENV=production bisheng build -c ./site/bisheng.config.js",
"start": "rimraf _site && mkdir _site && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js"
Copy the code

4.2. Create the site folder under the project directory

Create /bisheng.config.js in the site directory as follows

const path = require('path'); /** * bisheng start read */ module.exports = {theme: './site/theme', // set theme directory of website port: 8881, hash: true, exclude: {// Find all markdown files under this source and return an array. The markdown files that need to be displayed must be configured in the source components: '. / components / / component is in the folder path}, htmlTemplate: '. / static/site/theme/template. HTML ', / / page template themeConfig: {// topic configuration categoryOrder: {},//category display order typeOrder: {}//type display order}, filePathMapper(filePath) {}, // filePath conversion method doraConfig: {verbose: true,}, lessConfig: {javascriptEnabled: true,}, webpackConfig(config) {config.resolve.alias = {site: path.join(process.cwd(), 'site'), 'components':path.join(process.cwd(), 'components') }; config.externals = { 'react-router-dom': 'ReactRouterDOM' }; config.module.rules.push({ test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto', }); return config; }, devServerConfig: { public: process.env.DEV_HOST || 'localhost', disableHostCheck: !! process.env.DEV_HOST, }, };Copy the code

4.3. Create theme files in the site directory

Theme ├ ─ ─ index. Js / / page configuration file ├ ─ ─ the static └ ─ ─ template. / / HTML page template └ ─ ─ the template / / page content ├ ─ ─ index. The js ├ ─ ─ NotFound └...Copy the code

4.4. Modify the theme/index.js configuration

const path = require('path'); const homeTmpl = './template/index'; module.exports = { lazyLoad(nodePath, nodeValue) { if (typeof nodeValue === 'string') { return true; } return nodePath.endsWith('/demo'); }, // match the filename configuration to block md data and pass it to the template. pick: { components(markdownData) { const { filename } = markdownData.meta; if (! /^components/.test(filename) || /[/\\]demo$/.test(path.dirname(filename))) { return null; } return { meta: markdownData.meta, }; }}, routes: {path: '/', Component: homeTmpl, indexRoute: {component: homeTmpl}, childRoutes: [],//{path: '/', component: homeTmpl}, childRoutes: [],//{path: '/' '', component: ... }}};Copy the code

4.5. Modify the theme/static/template. HTML

<! DOCTYPE html> <html {{ htmlAttributes | safe }}> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Initial scale = 1.0 "/ > < title > {% % if the title} {{title | safe}} else {% %} {% endif %} < / title > {% if meta %} {{meta | safe }}{% endif %} {% for cssFile in manifest["css"] %} <link rel="stylesheet" type="text/css" href="{{ root }}{{ cssFile }}"  /> {% endfor %} <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less" /> </head> <body> <div id="react-content"> {{ content | safe }} </div> {% for jsFile in manifest["js"] %}<script src="{{ root }}{{ jsFile }}"></script> {% endfor %} </body> </html>Copy the code

After the configuration is complete, run the NPM start command to run the local environment normally.

The props object received by the page contains all md file data that has been processed. You can customize your own personalized page based on the data and methods in the props.