ReactWheels10-制作官网 

1
2
3
4
5
6
7
8
9
10
11
12
yarn add -D file-loader@3.0.1

webpack 文件添加配置

{
    test: /\.(png|jpe?g|gif)$/i,
    use: [
        {
            loader: 'file-loader',
        },
    ],
},

example.tsx 里 引入图片

1
2
3
const logo = require('./logo.png');

<img src={logo} alt=""/>

IDEA高级技巧

  • 清空缓存，重新载入项目
1
顶部菜单=> file => invalidate Caches / Restart

如何展示源代码？

  • !!raw-loader 代表开启加载
  • !!raw-loader!路径 代表加载的文件 
1
2
3
4
5
yarn add raw-loader@2.0.0

然后在 example.tsx里
const x = require('!!raw-loader!./lib/icon/icon.example.tsx');
console.log(x.default)

demo.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;

icon.demo.tsx

1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import IconExample from "./icon.example";
import Demo from "../../demo";

const IconDemo = () => {
    return (
        <Demo code={require('!!raw-loader!./icon.example.tsx').default}>
            <IconExample/>
        </Demo>
    )
}
export default IconDemo;
  • 不要企图传递组件路径让 demo.tsx 里去动态加载,因为不支持，试过了 
    1
    const code = require(`!!raw-loader!${prop.path}`).default

源代码高亮

1
yarn add prism-react-renderer@0.1.6 -D

demo.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import * as React from 'react';
import Highlight, {defaultProps} from "prism-react-renderer";
import {useState} from "react";

interface Props {
    code:string;
}

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

const Demo:React.FunctionComponent<Props> = (props) => {
    const [codeVisible,setCodeVisible] = useState(false);
    const code = (
        <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>
    );
    return (
        <div className="example">
            {props.children}
            <div>
                <button onClick={()=>setCodeVisible(!codeVisible)}>查看代码</button>
            </div>
            <div>
                {codeVisible && code}
            </div>

        </div>
    )
}

export default Demo;

部署

修改 webpack.config.example.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const base = require('./webpack.config')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = Object.assign({},base,{
    mode:'production',
    output: {
        path: path.resolve(__dirname, 'doc'),
    },
    entry:{
        example:'./example.tsx'
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'example.html',
            filename: "index.html"
        })
    ]
})

新建分支 

1
2
3
4
5
6
7
8
9
10
11
git branch gh-pages
git checkout gh-pages
# 提交到远程
git push orgin gh-pages:gh-pages
# 删除所有文件
rm -rf *
# 提交
git add .
git commit -m "remove all files"

# 回到master

doc.sh

1
2
3
4
5
6
7
8
9
#!/bin/env bash

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