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. (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 配置相关
- px2rem 插件
- build 时默认输出 bundleAnalyzer 结果
- 去除 sass,限定使用 less
- 去除 eslint-loader
- 增加 styled-components 相关配置
- 增加 ts-loader,可切换为 babel-loader
- 增加转为 dts-from-thrift 工具定制的 babel-plugin 以支持 const string 和 const enum 转 hard code
- 只支持初始化 typescript 应用
- HtmlWebpackPlugin 资源插入位置可配
- 默认开启 hard-source-webpack-plugin
- 默认读取项目路径 webpack.config.js 或者生产环境 webpack.config.prod.js,可重写 webpack 配置
- 为 SSR bundle 生成 d.ts
build
- 支持
--modern
已输出现代游览器的 build 结果,减少 polyfill 体积 - 支持
--csr
、--ssr
、--library
参数来构建不同用处的 bundle
jest
- 使用 ts-jest preset 进行测试
- 使用 enzyme 作为测试辅助工具
- 支持 tsconfig baseUrl + paths 映射导入
其他命令
-
watch
输出 bundle 到指定路径,方便其 static server、代理线上资源、开发 ssr 用
-
compile
将 tsx、svg、less 文件进行编译,作为 CommonJS | es2015 模块输出