byted-react-scripts

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:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.

.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. (only when NO_TS_LOADER=true will work)

• 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 模块输出