typescript-vikingship

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

typescript-vikingship

★ 20 Open GitHub ↗

No description available.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## node-sass 安装不上解决办法

安装 nrm

npm install -g nrm
    
    切换到淘宝镜像安装

## 安装 jestjs 通用测试框架
    js:
        npm install jest
    ts:
        npm install jest @types/jest firebase-functions-test ts-jest -D

## 安装 react 测试框架

npm i @testing-library/react @testing-library/react-hooks @testing-library/jest-dom -D

@testing-library/react 测试React Component的库
    @testing-library/react-hooks 测试自己写的的React Hooks的库
    @testing-library/jest-dom 提供更多利于dom测试的断言

报错
        http://www.voidcn.com/article/p-mcvcsfwy-bvu.html
        reactjs – Jest找不到模块FileName.css(映射为identity-obj-proxy)

安装
            npm install --save-dev identity-obj-proxy
            
    并配置 jest.config.js 文件

## 安装字体图标
    http://www.fontawesome.com.cn/faicons/
    https://github.com/FortAwesome/react-fontawesome

npm i --save @fortawesome/fontawesome-svg-core \
             @fortawesome/free-solid-svg-icons \
             @fortawesome/react-fontawesome
    
## 安装动画库
    https://reactjs.org/docs/animation.html
    npm i react-transition-group @types/react-transition-group -S

# 安装  storybook,用于查看我们写好的组件
    https://storybook.js.org/docs/guides/guide-react/

npx -p @storybook/cli sb init

支持ts,tsx配置
        https://storybook.js.org/docs/configurations/typescript-config/
        .storybook/main.js
            module.exports = {
                stories: ['../stories/**/*.stories.tsx', '../src/**/*.scss'],
                addons: ['@storybook/addon-actions', '@storybook/addon-links'],
                webpackFinal: async config => {
                    // do mutation to the config
                    config.module.rules.push({
                        test: /\.(ts|tsx)$/,
                        use: [
                            {
                                loader: require.resolve('ts-loader'),
                            },
                        ],
                    });
                    config.module.rules.push({
                        test: /\.scss$/,
                        use: ['style-loader', 'css-loader', 'sass-loader'],
                    });
                    config.resolve.extensions.push('.ts', '.tsx');
                    return config;
                },
            };

配置全局的修饰器    
        .storybook/preview.js
            import { addDecorator } from '@storybook/react';
            import React from 'react';

定义内容居中的组件
            const styles = {
                textAlign: 'center',
            };
            const Center = ({ children }) => <div style={styles}>{children}</div>;

addDecorator(storyFn => <Center>{storyFn()}</Center>);

配置全局的修饰器
        stories/1-Button.stories.tsx
            import Button from './button';
            import Center from './center';

export default {
            title: 'Button',
                decorators: [storyFn => <Center>{storyFn()}</Center>],
            };

export const defaultView = () => (
                <Button>Hello Button</Button>
            );

## 安装  @storybook/addon-info 插件,用于展示组件的使用文档源码

https://github.com/storybookjs/storybook/tree/master/addons/info
    https://developer.aliyun.com/mirror/npm/package/@types/storybook__addon-info
    npm i -D @storybook/addon-info @types/storybook__addon-info -D

stories/Button.stories.tsx
        import React from 'react';
        import { withInfo } from '@storybook/addon-info';
        import { action } from '@storybook/addon-actions';
        import { Button } from '@storybook/react/demo';

export default {
            title: 'Button',
            component: Button,
            decorators: [withInfo],
        };

export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;

export const Emoji = () => (
        <Button onClick={action('clicked')}>
            <span role="img" aria-label="so cool">
            😀 😎 👍 💯
            </span>
        </Button>
        );

Emoji.story = {
            name: 'with emoji',
        };

## 添加自动生成文档 
    
    https://github.com/reactjs/react-docgen

支持typescript
    https://github.com/strothj/react-docgen-typescript-loader
    
        npm install --save-dev react-docgen-typescript-loader

要想使用这个库，组件必须要使用这样的导出，才能分析的出来
        import React, { useContext, FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';

组件也要这样导出
        export const Button: FC<ButtonProps> = (props) => {

## 打包

ts files.tsx -> es6 modules.jsx -> 入口文件引用余姚的文件 index.tsx -> module bundler webpack.rollup -> 浏览器执行的js
    
    package.json
        "main": "lib/index.js",
        scripts
            "build-lib:dev": "webpack --config ./build-lib/webpack.dev.config.js",
            "build-lib:prod": "webpack --config ./build-lib/webpack.prod.config.js",
            "build-lib": "npm run rm-lib && npm run build-lib:dev && npm run build-lib:prod",
            "rm-lib": "rimraf lib",

## 本地使用

当前项目执行
        npm link    创建一个全局的短链接，链接到当前项目目录

使用项目执行
        npm link typescript-vikingship      引用这个短链接

使用例子

typescript-vikingship 包项目
            npm link

typescript-vikingship-test 使用包项目
            npm link typescript-vikingship

会遇到一下问题
        Invalid hook call. Hooks
       原因是因为 typescript-vikingship-test 在使用link来的包时，被link包内使用的react是包项目内的react，和使用包项目依赖的react不是一个，所以会报警告

解决方式
            typescript-vikingship
                npm link ../typescript-vikingship-test/node_modules/react

这样就可以是同一个react了

https://reactjs.org/warnings/invalid-hook-call-warning.html

## 发布包

注册账号
        npm whoami  检查是否登陆
        npm adduser 创建账号
        npm login   登陆账号
    
    // 发布前执行
    package.json
        "scripts": {
            // "prepublish": "npm run build-lib" // 即将废弃
            "prepublishOnly": "npm run build-lib" // 发布前要做的事
        }
        "files": [      // 表示要把哪些资源上传到npm仓库上去，不写默认使用 .gitignore 内的信息
            "lib"
        ],

npm publish  发布包

## 注意事项
    解决用户安装我们的包时安装了两份react和react-dom库

用户在安装时，该处声明的依赖不会被安装
    "peerDependencies": {
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0"
    },

删除 dependencies 内的两个依赖
    "react": "^16.13.1",
    "react-dom": "^16.13.1",

然而开发时还要使用，所以将删除的引用，重新添加到devDependencies中
    "devDependencies": {
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
    }

## 生成静态文档

npm run build-storybook

生成 storybook-static 目录

## 发布集成

https://travis-ci.com/

typescript-vikingship

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README