react-bootstrap读后感

发表于 | 阅读次数

基于react-bootstrap的0.32.1版本。

eslint

extends

eslint-config-airbnb

使用了基于airbnb的js代码风格，详细了解：

prettier

格式化代码，使代码风格统一，详细了解：

plugins

babel插件

参考文章：

preset

感觉挺有用的第三方模块

  • chai：Node.js的断言库

  • codecov：集成测试覆盖率工具

参考网址：

  • colors：很容易设置颜色

  • cross-env：解决跨平台命令问题

  • enzyme：测试React

  • fs-extra：为原生的fs模块添加promise支持

  • husky：Git hooks made easy

  • sinon：Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework.

  • invariant：在开发环境下提示错误的快速写法

  • warning：facebook的warning，快速写警告

  • keycode：在键盘键码和键名之间进行转换，反之亦然

用到的测试框架

  • mocha：Node.js的测试框架

  • karama：JS测试框架

React好像推荐的是Jest框架，这个有待了解

编译提供的选择

  • dist：使用webpack提供的webpack方法进行编译；

  • lib：使用babel的transform方法编译；

  • es：使用babel的transform方法编译，和lib方法不同的是少了一个babel-plugin-add-module-exports插件；（这个文件应该没什么用吧，现在浏览器支持率这么低）

  • bower：复制dist文件夹

用到的一些JS语法

使用yarn替换npm

运行yarn命令

忽略一些文件当别人安装时

通过制定package.json的files字段，或者也可以制定.npmignore。以下文件一定会包含：

  • package.json

  • README

  • CHANGES / CHANGELOG / HISTORY

  • LICENSE / LICENCE

  • NOTICE

  • main字段指定的文件

相反，以下文件总会被忽略：

  • .git

  • CVS

  • .svn

  • .hg

  • .lock-wscript

  • .wafpickle-N

  • .*.swp

  • .DS_Store

  • ._*

  • npm-debug.log

  • .npmrc

  • node_modules

  • config.gypi

  • *.orig

  • package-lock.json (use shrinkwrap instead)

在webstrom中使用eslint校验

先安装eslint插件，配置Eslint Plugin：

eslint config

然后打开file/settings/Keymap，搜索ESlint找到Fix ESLint Problems，右击选择Add Keyboard Shortcut， 键入ctrl + e（这里看个人习惯）

详细：https://github.com/idok/eslint-plugin

gatsby

报错：RootQueryType.allSitePage field type must be Output Type but got: SitePageConnection.

运行yarn list gatsby发现会有多个依赖：

1
2
npm remove graphql
npm install gatsby

要统一一个版本的gatsby

报错"jsonName" of undefined

目录中不能包含中文目录

Error: Schema must contain unique named types but contains multiple types named “JSON”

暂时不知道为什么

有时候要删除.cache文件并重启才能生效，不知道为什么？？？

hexo d -g报错[Windows] bash: /dev/tty: No such a device or address

Try adding this into your git config

1
2
[credential]
    helper = wincred

or via console

1
git config --global credential.helper wincred

shareui文档构建

首先在根目录下运行脚手架：

1
2
gatsby new doc 
cd doc

然后修改gatsby的配置：

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
const path = require("path");

module.exports = {
    siteMetadata: {
        title: "Shareui文档"
    },
    plugins: [
        "gatsby-plugin-react-helmet",
        {
            resolve: "gatsby-source-filesystem",
            options: {
                path: path.resolve(__dirname, "../src"),
                name: "source"
            }
        },
        "gatsby-transformer-react-docgen",
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: ["gatsby-remark-prismjs"]
            }
        },
        "gatsby-plugin-catch-links"
    ]
};

使用gatsby-source-filesystem可以方便查询本地文件的相关信息；使用gatsby-transformer-react-docgen方便查询组件信息。

在src/pages目录下新建alert.js（会自动生成alert页面）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react";
import Link from "gatsby-link";
import PropTable from "../components/PropTable";

const Page = ({data}) => (
    <div>
        <h1>{data.componentMetadata && data.componentMetadata.description}</h1>
        <Link to="/">返回首页</Link>
        <PropTable metadata={data} />
    </div>
);

export const query = graphql`
    query AlertQuery {
        componentMetadata(displayName: {eq: "Alert"}) {
            ...PropTable_metadata
        }
    }
`;

export default Page;

其中的片段PropTable_metadata如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export const metadataFragment = graphql`
    fragment PropTable_metadata on ComponentMetadata {
        displayName
        description
        props {
            name
            type {
                name
                value
                raw
            }
            defaultValue {
                value
                computed
            }
            required
        }
    }
`;

为了列出所有的组件，我们使用gatsby-source-filesystem查询出在src目录下的所有组件，并添加到首页（doc/src/index.js）：

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
import React from "react";
import Link from "gatsby-link";

const IndexPage = ({data}) => (
    <div>
        <h3>基础组件</h3>
        <ol>
            {data.allFile.edges
                //先排序
                .sort((a, b) => {
                    if (a.node.name > b.node.name) {
                        return 1;
                    } else if (a.node.name < b.node.name) {
                        return -1;
                    }
                    return 0;
                })
                //排除index.js和utils下的文件
                .map(
                    (edge, index) =>
                        edge.node.relativeDirectory !== "utils" &&
                        edge.node.name !== "index" && (
                            <li key={index}>
                                <Link to={`/${edge.node.name}/`}>
                                    {edge.node.name}
                                </Link>
                            </li>
                        )
                )}
        </ol>
    </div>
);

export const query = graphql`
    query allComponent {
        allFile {
            edges {
                node {
                    name
                    relativeDirectory
                }
            }
        }
    }
`;

export default IndexPage;

读取组件的注释：

1
2
3
4
5
/**
 * 提示框（Alert）
 */
class Alert extends React.Component {
}

之后通过data.componentMetadata.description字段即可获取。

属性注释会报错Error: Schema must contain unique named types but contains multiple types named “JSON”，暂时不知道为什么