react-tcli
Typescript rewire of react-scripts where you can extend the webpack config. This is not a fork of react-script but it builds on top of any published react-scripts libary.
common issues
Python with sass for windows:
npm config set python "path/to/python"
Features
- CSS modules and "normal" css
- Jest, Enzyme and React with react-scripts and ts-jest
- Typescript
- Synthetic default import
- Dynamic imports
- Tslint
- Path alias for typescript
Disclaimer
This is a work in progress. If you find any bug or want better documentation please let us know!
Install (getting started)
run npm install @ords/react-tcli or do a global install npm install @ords/react-tcli -g.
You can then setup a new project with: react-tcli init. This will create a new folder called sampleProject.
If you have an exisiting project then modify your package.json you can add the following scripts:
"test": "react-tcli --src customPath/To/Src --withLatestReactEnzyme",
"start": "react-tclit --src customPath/To/Src",
"build": "react-tclit --src customPath/To/Src"
Suggested tslint
Use the build in linter by adding a tslint.json file in the root of your project with the following:
{ "extends": [ "./node_modules/@ords/react-tcli/dist/defaultConfigurations/tslint.json" ] }
Suggested and tested tsconfig compiler options
We only support a target of es5. To use our tsconfig, create your own with the following content:
{ "extends": "./node_modules/@ords/react-tcli/dist/defaultConfigurations/tsconfig.json" }
CSS modules
You can use traditional css import or name your files .module.css to use css modules.
Commands
Any commands that use webpack can have the configuration extended. Configurations for all the commands are described in this section.
Command init
Creates a new project
Command test
Use Jest to run test as of react-scripts. Filenames should be [name].spec.(ts|tsx|js|jsx)
| Prop | Default | Description |
|---|---|---|
| --src | src | Location of test source files |
| --env | undefined | please specify jsdom to use mount in jest |
| --setupTestFile | undefined | Location of jest setupTestFile |
| --withLatestReactEnzyme | undefined | Using setupTestFile from this project |
Command start
Use webpack to serve and develop your react project
| Prop | Default | Description |
|---|---|---|
| --src | src | Location of source files |
| --public | public | Location of react public dir |
| --extendWebpackFile | undefined | Location of file to extend webpack config |
Command build
Use webpack to build your react project
| Prop | Default | Description |
|---|---|---|
| --src | src | Location of source files |
| --public | public | Location of react public dir |
| --extendWebpackFile | undefined | Location of file to extend webpack config |
More features
Are we missing anything? Should the project be even more configurable? Let us know!