npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cra-template-jyann

v0.7.0

Published

The base TypeScript template for Create React App.

Downloads

4

Readme

byted-react-scripts

usage:

create-react-app <project-dir> --scripts-version=byted-react-scripts --template=cra-template-jyann

This package includes scripts and configuration forked from Create React App. Please refer to its documentation:

.env config

  • DISABLE_SVGO

    default: 'false'

    If disable @svgr/svgo-plugin, please make sure your svg file do not use xlink:href or use:id to reuse svg element.

  • REACT_APP_NO_CACHE

    Close hard-source-webpack-plugin

  • TSC_COMPILE_ON_ERROR

    default: 'false'

    Allows users to run and properly build TypeScript projects even if there are TypeScript type check errors.

  • NO_TS_LOADER

  • CONST_ENUM_JSON_FILE

    default: ./typings/enums.json

  • REACT_APP_BUILD_MODERN

    default: 'false'

    whether build a assets set based on ES2015

  • PUBLIC_URL

    default: ''

    prefix url of assets injected into index.html

  • REACT_APP_HTML_INJECT

    default: true

    inject webpack assets into HTML template

与 CRA 的 react-scripts 不同点

Webpack 配置相关

  1. px2rem 插件
  2. build 时默认输出 bundleAnalyzer 结果
  3. 去除 sass,限定使用 less
  4. 去除 eslint-loader
  5. 增加 styled-components 相关配置
  6. 增加 ts-loader,可切换为 babel-loader
  7. 增加转为 dts-from-thrift 工具定制的 babel-plugin 以支持 const string 和 const enum 转 hard code
  8. 只支持初始化 typescript 应用
  9. HtmlWebpackPlugin 资源插入位置可配
  10. 默认开启 hard-source-webpack-plugin
  11. 默认读取项目路径 webpack.config.js 或者生产环境 webpack.config.prod.js,可重写 webpack 配置
  12. 为 SSR bundle 生成 d.ts

build

  1. 支持 --modern 已输出现代游览器的 build 结果,减少 polyfill 体积
  2. 支持 --csr--ssr--library 参数来构建不同用处的 bundle

jest

  1. 使用 ts-jest preset 进行测试
  2. 使用 enzyme 作为测试辅助工具
  3. 支持 tsconfig baseUrl + paths 映射导入

其他命令

  1. watch

    输出 bundle 到指定路径,方便其 static server、代理线上资源、开发 ssr 用

  2. compile

    将 tsx、svg、less 文件进行编译,作为 CommonJS | es2015 模块输出