quick-react-scripts
用于快速创建React组件项目
Last updated a month ago by xueyou2000 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install quick-react-scripts 
SYNC missed versions from official npm registry.

quick-react-scripts


NPM version node version npm download

Intro

quick-react-scripts

quick-react-scripts用于快速创建React组件项目.

特性:

  • [x] TypeScript 支持
  • [x] Jest, react-testing-library 测试
  • [x] Rollup 打包assets文件, 比如scss
  • [x] install时优先使用yarn
  • [x] 支持最新的React Hooks
  • [x] 支持storybook

Table of contents

Getting Started

  1. 全局安装quick-react-scripts:
yarn global add quick-react-scripts
  1. 初始化一个项目
quick-react-scripts init my-component

Guide

quick-react-scripts是一个CLI工具, 以下介绍如何CLI的子命令.

quick-react-scripts -h 查看帮助

Init

quick-react-scripts init hello-wrold

初始化一个组件项目, 创建好了一切.

包含:

  • 一个简单的组件
  • 一个简单的测试
  • 一个简单的例子
  • 自动化的storybook,
    • examples文件夹中的例子自动加载
    • readme自动加载
    • 组件propsapi
  • 支持scssassets编译[可选]

Build

quick-react-scripts build

不要独立运行命令, 初始化项目后, 它已经包含在package.jsonscripts里.

# init
quick-react-scripts init hello-wrold
cd hello-wrold
# run build
yarn build

编译仅仅是调用tsc去编译src里的代码, 通过更改tsconfig.json去配置编译. 并且编译后的都是es模块代码, 也不会做任何polyfills.

所以最后都是在最终项目中处理这些es组件模块的转换, 压缩等.

编译assets

编译assets是可选的, 需要时请提供一个入口文件, 位于如下位置:

hello-wrold
└── src
    └── assets
        └── index.js
// src/assets/index.js
// 引入需要编译打包的文件
import "./index.scss";

编译完后会在项目根目录下创建assets文件夹. 和_.js的文件, 可以通过覆盖默认配置去控制.

默认编译配置

{
    "file": "assets/_.js",
    "format": "es"
}

修改package.jsonrollup字段配置编译:

{
    "rollup": {
        "file": "assets/_.js",
        "format": "es"
    }
}

Test

quick-react-scripts test

不要独立运行命令, 初始化项目后, 它已经包含在package.jsonscripts里.

# init
quick-react-scripts init hello-wrold
cd hello-wrold
# run test
yarn test

将调用jest去测试项目, 测试文件位于tests文件夹内名为xx.specxx.test, 后缀名为tstsx的文件

覆盖测试配置

修改package.jsonjest字段配置测试:

{
    "jest": {
        "testMatch": ["<rootDir>/tests/**/*.(spec|test).ts?(x)"],
        "transformIgnorePatterns": ["<rootDir>/node_modules/(?!(utils-hooks/es))"]
    }
}

Case

使用quick-react-scripts的案例:

License

Quick-React-Scripts is open source software licensed as MIT.

Current Tags

  • 1.2.3                                ...           latest (a month ago)

24 Versions

  • 1.2.3                                ...           a month ago
  • 1.2.2                                ...           a month ago
  • 1.2.1                                ...           4 months ago
  • 1.2.0                                ...           4 months ago
  • 1.1.9                                ...           5 months ago
  • 1.1.8                                ...           5 months ago
  • 1.1.7                                ...           5 months ago
  • 1.1.6                                ...           5 months ago
  • 1.1.5                                ...           5 months ago
  • 1.1.4                                ...           5 months ago
  • 1.1.3                                ...           5 months ago
  • 1.1.2                                ...           5 months ago
  • 1.1.1                                ...           5 months ago
  • 1.0.11                                ...           6 months ago
  • 1.0.9                                ...           6 months ago
  • 1.0.8                                ...           7 months ago
  • 1.0.7                                ...           7 months ago
  • 1.0.6                                ...           7 months ago
  • 1.0.5                                ...           7 months ago
  • 1.0.4                                ...           7 months ago
  • 1.0.3                                ...           7 months ago
  • 1.0.2                                ...           7 months ago
  • 1.0.1                                ...           7 months ago
  • 1.0.0                                ...           7 months ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 5
Last Day 1
Last Week 4
Last Month 39
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |