搭建自己的官网

在我们的几个轮子的基础上引入我们之前写的layout，然后引入一个img作为logo
问题：图片不会显示，并且报错

example.tsx

import logo from './logo.png'
ReactDOM.render(
  <Router>
    <Layout className="page">
      <Header>
        <div className="logo">
          <img src={logo} alt=""/>
          IReact-UI
        </div>
      </Header>
      <Layout>
        <Aside style={{border: '1px solid green'}}>
          <h2>组件</h2>
          <ul>
            <li>
              <Link to="/icon">Icon</Link>
            </li>
            <li>
              <Link to="/button">button</Link>
            </li>
            <li>
              <Link to="/dialog">dialog</Link>
            </li>
            <li>
              <Link to="/layout">layout</Link>
            </li>
          </ul>
        </Aside>
        <Content>
          <Route path="/icon" component={IconExample}></Route>
          <Route path="/button" component={ButtonExample}></Route>
          <Route path="/dialog" component={DialogExample}></Route>
          <Route path="/layout" component={LayoutExample}></Route>
        </Content>
      </Layout>
      <Footer style={{border: '1px solid black'}}>
        footer
      </Footer>
    </Layout>
  </Router>,
  document.querySelector('#root')
);

方法：在webpack中添加图片模块的匹配规则

webpack.config.js

{
     test: /\.(png|jpg|jpeg|gif)$/,
     use: ['file-loader']
}

安装file-loader，再次运行yarn start虽然图片可以显示了，但是编辑器还是提示ts的错误

该用required引入图片

const logo = require('./logo.png')

使用NavLInk代替Link，为选中的nav添加激活状态

import {NavLink} from 'react-router-dom'

<li>
   <NavLink to="/icon">Icon</NavLink>
</li>

在css里给当前的a添加一个.active

a.active {
    color: $main-color;
}

在页面上展示源代码

在我们的每个组件的exmaple里添加下面的代码（以icon为例）

const x = require('!!raw-loader!./icon.example.tsx')

安装raw-loader，然后使用x.default就可以拿到我们这个icon.example.tsx里的代码了
页面显示如下：

问题1：

我们上面的代码把我们的raw-loader也会显示在页面中，而我们不希望它展示在页面上
解决方法：使用一个中间组件，里面单独写raw-loader，然后引入我们需要展示代码的组件
这个组件里面既要渲染我们引入的组件，又要展示这个组件的代码

demo.tsx

import * as React from 'react';

interface Props {
  code: string
}
const Demo: React.FunctionComponent<Props> = (props) => {
  return (
    <div>
      {props.children}
      <pre>
        {props.code}
      </pre>
    </div>
  )
}
export default Demo

然后在每个组件里新建一个对应的demo.tsx文件

icon.demo.tsx

import IconExample from "./icon.example";
import React from 'react';
import Demo from '../../demo'

const x = require('!!raw-loader!./icon.example.tsx')

const IconDemo = () => {
  return (
    <Demo code={x.default}>
      <IconExample/>
    </Demo>
  )
}
export default IconDemo;

在example里使用iconDemo

<Route path="/icon" component={IconDemo}/>

支持源代码高亮

使用prism-react-renderer插件，在demo.tsx里添加下面代码

import Highlight, {defaultProps} from "prism-react-renderer";
<Highlight {...defaultProps} code={props.code} language="jsx">
  {({className, style, tokens, getLineProps, getTokenProps}) => (
    <pre className={className} style={style}>
        {tokens.map((line, i) => (
          <div {...getLineProps({line, key: i})}>
            {line.map((token, key) => (
              <span {...getTokenProps({token, key})} />
            ))}
          </div>
        ))}
      </pre>
  )}
</Highlight>

让example打包后出现在dist目录里

在我们的webpack.config.prod.js里添加下面代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = Object.assign({}, base, {
    // 入口添加example文件
    entry: {
      ...base.entry,
      example: './example.tsx'
    },
   plugins: [
        new HtmlWebpackPlugin({
            template: 'example.html', // 生成一个html页面
            filename: 'example.html' // 修改html页面文件名为example.html
        })
    ]
})

运行yarn build

dist目录里就会有example.html和example.js文件

问题

1.现在我们的example.html页面是有了，但是打开会报错

原因：因为我们没把react打包进去，所以我们需要再建一个webpack.config.doc.js来把react打包进去，还原之前的prod里的配置

webpack.config.doc.js

const path = require('path')
const base = require('./webpack.config')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = Object.assign({}, base, {
    mode: 'production',
    entry: {
      ...base.entry,
      example: './example.tsx'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'example.html',
            filename: 'example.html'
        })
    ]
})

配置doc的命令

package.json

"doc": "cross-env NODE_ENV=production webpack --config webpack.config.doc.js",

运行yarn doc 就能访问我们的页面了

我只想运行doc生成example文件不需要生成其他文件
1). 只把example作为入口文件
2). 输出的文件目录改为doc

webpack.config.doc.js

output: {
      path: path.resolve(__dirname, 'doc')
    },
    entry: {
      example: './example.tsx'
    },

部署

将我们的doc里面的html和js单独新建一个一个分支，只存放他们，然后我们的pge以这个分支为主

在master分支下删除除ignore外的所有文件，隐藏文件不需要删除
新建一个gh-pages分支，然后推送到远程

git checkout -b gh-pages
git push origin gh-pages

运行yarn doc，然后切换到gh-pages，将doc里的文件全部移动到当前目录，然后提交，再push，最后再切换成master

yarn doc
git checkout gh-pages
mv -f doc/* ./
git add .
git commit -m 'update'
git push origin gh-pages
git checkout master

将3里的命令写成一个脚本

doc.sh

#!/bin/env bash
yarn doc
git checkout gh-pages
mv -f doc/* ./
git add .
git commit -m "update"
git push origin gh-pages
git checkout master

在mster上提交doc.sh文件，然后每次只需要运行sh ./doc.sh就可以了，最后为了方便我们访问页面，把我们的doc里默认生成的example.html改成index.html