Skip to content
scripts for create-react-app base on react-scripts-ts
Branch: master
Clone or download
宋泽 宋泽
Latest commit 429456a Sep 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin feat: update to 2.15.1 Apr 16, 2018
config
fixtures/kitchensink
scripts feat: update to react-scripts-ts 2.17.0 Sep 27, 2018
template feat: update to react-scripts-ts 2.17.0 Sep 27, 2018
.gitignore feat: update to 2.15.1 Apr 16, 2018
.npmignore init Oct 31, 2017
README.md feat: update to react-scripts-ts 2.17.0 Sep 27, 2018
eslintrc init Oct 31, 2017
index.js feat: expose some methods. Nov 16, 2017
package.json feat: update to react-scripts-ts 2.17.0 Sep 27, 2018

README.md

Create React apps (with Typescript and antd) with no build configuration.

base on react-scripts-ts@2.17.0

Usage

create a new project with create-react-app

create-react-app myapp --scripts-version=react-scripts-ts-antd

Features

Include ts-import-plugin for importing components on demand.

// source
import { Card } from 'antd';

// output
import Card from 'antd/lib/card';
import Card from 'antd/lib/card/style/index.less';

Include react-app-rewired

You can rewire your webpack configurations without eject.

// You can get all default loads
const { loaders } = require('react-scripts-ts-antd');

Support scss and less

  • use less-loader for less.
  • use precss for scss.

Turn on some options of compileOptions in tsconfig.json.

// tsconfig.json
{
    "allowSyntheticDefaultImports": "true",
    "experimentalDecorators": "true"
}

Tips

How to avoid importing styles twice

If you want to customize theme by overriding less variables like below.

// index.less
@import "~antd/dist/antd.less";
@primary-color: #000;

You have imported all styles and ts-import-plugin will import styles again. So you need to reset ts-loader options by modifying config-overrides.js to avoid importing styles twice.

// config-overrides.js
const { getLoader } = require("react-app-rewired");
const tsImportPluginFactory = require('ts-import-plugin');

module.exports = function override(config, env) {

  // get tsloader
  const tsloader = getLoader(
    config.module.rules,
    rule => String(rule.test) == String(/\.(ts|tsx)$/)
  );

  // set new options
  tsloader.options = {
    transpileOnly: true,
    getCustomTransformers: () => ({
      before: [
        tsImportPluginFactory([
          {
            libraryName: 'antd',
            libraryDirectory: 'lib',
          },
          {
            libraryName: 'antd-mobile',
            libraryDirectory: 'lib',
          }
        ])
      ]
    })
  }
  return config;
};

antd package will be installed automatically.If you need antd-mobile, install it manually.

react-scripts

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

You can’t perform that action at this time.