# riant-scripts

> Configuration and scripts for Create React App.

Latest version **1.3.0** (published 2020-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install riant-scripts
pnpm add riant-scripts
yarn add riant-scripts
bun add riant-scripts
```

Provides the command `riant-scripts`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2020-01-14 |
| First published | 2019-11-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 56.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jesse Feng |
| Maintainers | fengxinming |
| Keywords | react-scripts |

## Links

- npm: https://www.npmjs.com/package/riant-scripts
- Repository: https://github.com/react-hobby/riant
- Homepage: https://github.com/react-hobby/riant#readme
- Issues: https://github.com/react-hobby/riant/issues
- npm.io page: https://npm.io/package/riant-scripts

## Dependencies (14)

- [ajv](https://npm.io/package/ajv.md) ^6.10.2
- [ora](https://npm.io/package/ora.md) ^4.0.3
- [celia](https://npm.io/package/celia.md) ^6.1.4
- [chalk](https://npm.io/package/chalk.md) ^3.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [semver](https://npm.io/package/semver.md) ^6.3.0
- [clrsole](https://npm.io/package/clrsole.md) ^2.0.0
- [progress](https://npm.io/package/progress.md) ^2.0.3
- [ajv-keywords](https://npm.io/package/ajv-keywords.md) ^3.4.1
- [cache-loader](https://npm.io/package/cache-loader.md) ^4.1.0
- [thread-loader](https://npm.io/package/thread-loader.md) ^2.1.3
- [webpack-chain](https://npm.io/package/webpack-chain.md) ^6.0.0
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.2.2
- [cli-progress-webpack-plugin](https://npm.io/package/cli-progress-webpack-plugin.md) ^1.0.0

## Recent versions

- 1.3.0 (latest) — 2020-01-14
- 1.4.0-0 (beta) — 2020-01-21
- 1.3.0-0 — 2020-01-04
- 1.2.0 — 2020-01-01
- 1.2.0-2 — 2019-12-25
- 1.2.0-0 — 2019-12-22
- 1.1.4 — 2019-12-14
- 1.1.4-8 — 2019-12-13
- 1.1.4-7 — 2019-12-13
- 1.1.4-1 — 2019-12-05
- 1.1.3 — 2019-12-03
- 1.1.2 — 2019-12-02
- 1.1.1 — 2019-11-26
- 1.1.0 — 2019-11-23
- 1.0.2 — 2019-11-21
- … 2 more at https://npm.io/package/riant-scripts/versions

## README

# riant-scripts

[![npm package](https://nodei.co/npm/riant-scripts.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/riant-scripts)

> Create your app using [create-react-app](https://github.com/facebookincubator/create-react-app) , and tweak the create-react-app webpack config(s) , especially preset `less-loader` and `stylus-loader` .

[![NPM version](https://img.shields.io/npm/v/riant-scripts.svg?style=flat)](https://npmjs.org/package/riant-scripts)
[![NPM Downloads](https://img.shields.io/npm/dm/riant-scripts.svg?style=flat)](https://npmjs.org/package/riant-scripts)

## [中文文档](/packages/riant-scripts/README_zh-CN.md)

## Install riant-scripts

```bash
$ npm install riant-scripts --save-dev
```

### Schema

```javascript
/* riant.config.js */
module.exports = {
  alias: { instanceof: ['Function', 'Object'] },
  babelPlugins: { instanceof: ['Function', 'Array'] },
  chainWebpack: { instanceof: 'Function' },
  configureWebpack: { instanceof: 'Function' },
  css: {
    type: 'object',
    properties: {
      modules: { type: 'boolean' },
      sourceMap: { type: 'boolean' },
      loaderOptions: {
        type: 'object',
        properties: {
          css: { type: 'object' },
          less: { type: 'object' },
          stylus: { type: 'object' },
          postcss: { type: 'object' }
        }
      }
    }
  },
  devServer: { instanceof: ['Function', 'Object'] },
  extensions: { instanceof: ['Function', 'Array'] },
  externals: { instanceof: ['Function', 'Array', 'RegExp', 'Object'] },
  filenameHashing: { type: 'boolean' },
  jest: { instanceof: ['Function', 'Object'] },
  pages: { type: 'object' },
  parallel: { type: ['boolean', 'number'] },
  paths: { instanceof: ['Function', 'Object'] },
  riantPlugins: { instanceof: 'Array' },
  useEslintrc: { type: 'boolean' }
}
```

### Create a riant.config.js file in the root directory

* **Create aliases to import or require certain modules more easily**

```javascript
/* riant.config.js */
module.exports = {
  alias: {
    '@': path.join(__dirname, 'src')
  }
}
```

```javascript
/* riant.config.js */
module.exports = {
  alias(chainedMap, env) {
    chainedMap.set('@', path.join(__dirname, 'src'));
  }
}
```

* **Add plugins to Babel**

```javascript
/* riant.config.js */
module.exports = {
  babelPlugins: [
    [
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
      },
      'fix-import-imports'
    ], 
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]
}
```


```javascript
/* riant.config.js */
module.exports = {
  babelPlugins(plugins, env) {
    plugins.push(
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: 'css',
        },
        'fix-import-imports'
      ],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    );
  }
}
```

```javascript
/* riant.config.js */
module.exports = {
  babelPlugins(plugins, env) {
    return plugins.concat([
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: 'css',
        },
        'fix-import-imports'
      ],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]);
  }
}
```

* **Customize Webpack config**

```javascript
/* riant.config.js */
module.exports = {
  chainWebpack(chainedConfig, env) {
    if (env === 'production') {
      // supporting Internet Explorer 9
      chainedConfig
        .entry('main')
        .prepend(require.resolve('react-app-polyfill/stable'))
        .prepend(require.resolve('react-app-polyfill/ie9'));

      // without `console.log`
      chainedConfig.optimization.minimizer('TerserPlugin').init((plugin) => {
        plugin.options.terserOptions.compress.pure_funcs = ['console.log'];
        return plugin;
      });
    }

    // code splitting
    if (env !== 'test') {
      chainedConfig
        .optimization.splitChunks({
          cacheGroups: {
            vendors: {
              name: `chunk-vendors`,
              test: /[\\/]node_modules[\\/]/,
              priority: -10,
              chunks: 'initial'
            },
            common: {
              name: `chunk-common`,
              minChunks: 2,
              priority: -20,
              chunks: 'initial',
              reuseExistingChunk: true
            }
          }
        });
    }
  }
}
```

```javascript
/* riant.config.js */
module.exports = {
  configureWebpack(objectConfig, env) {
    if (env === 'production') {
      // without `console.log`
      objectConfig
        .optimization
        .minimizer[0]
        .options
        .terserOptions
        .compress
        .pure_funcs = ['console.log'];
    }
  }
}
```

* **Customize style loader options**

```javascript
/* riant.config.js */
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        define: {
          '$cdn': 'https://cdn.jsdelivr.net'
        }
      }
    }
  }
}
```

* **Customize Dev Server config**

```javascript
/* riant.config.js */
module.exports = {
  devServer: { 
    proxy: {
      '/api': {
        target: 'http://localhost:8088',
        changeOrigin: true
      }
    },
  }
}
```

```javascript
/* riant.config.js */
module.exports = {
  devServer(devConfig, env) {
    devConfig.proxy = {
      '/api': {
        target: 'http://localhost:8088',
        changeOrigin: true
      }
    };
  }
}
```

* **Attempt to resolve these extensions in order**

```javascript
/* riant.config.js */
module.exports = {
  extensions: ['.properties']
}
```

```javascript
/* riant.config.js */
module.exports = {
  extensions(chainedSet, env) {
    chainedSet.add('.properties');
  }
}
```

* **Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime**

```javascript
/* riant.config.js */
module.exports = {
  externals: {
    jquery: 'jQuery'
  }
}
```

```javascript
/* riant.config.js */
module.exports = {
  externals() {
    return {
      jquery: 'jQuery'
    };
  }
}
```

* **Attempt to remove hash from filename**

```javascript
/* riant.config.js */
module.exports = {
  filenameHashing: false
}
```

* **Attempt to update jest config**

```javascript
/* riant.config.js */
module.exports = {
  jest(jestConfig) {
    return jestConfig;
  }
}
```

* **multi-page setup**

```javascript
/* riant.config.js */
module.exports = {
  pages: {
    home: 'src/home.js',
    form: 'src/form.js',
    notfound: 'src/notfound.js'
  }
}
```

* **Attempt to update paths**

```javascript
/* riant.config.js */
module.exports = {
  paths: { 

  }
}
```

```javascript
/* riant.config.js */
module.exports = {
  paths(pathsConfig, env) {

  }
}
```

* **use thread-loader for Babel or TypeScript transpilation**

```javascript
/* riant.config.js */
module.exports = {
  parallel: true
}
```

* **Add progress bar**

```javascript
/* riant.config.js */
module.exports = {
  progressBar: true
}
```

* **Add plugins to riant-scripts**

```javascript
/* riant.config.js */
module.exports = {
  riantPlugins: [
    function (service, projectOptions) {

    }
  ]
}
```

[plugins reference](lib/plugins)

* **Use eslintrc**

```javascript
/* riant.config.js */
module.exports = {
  useEslintrc: true
}
```

### Extended Webpack Configuration

* **supporting Internet Explorer 9**

```javascript
/* riant.config.js */
module.exports = {
  chainWebpack(chainedConfig, env) {
    if (env === 'production') {
      chainedConfig
        .entry('main')
        .prepend(require.resolve('react-app-polyfill/stable'))
        .prepend(require.resolve('react-app-polyfill/ie9'));
    }
}
```

* **without console.log**

```javascript
/* riant.config.js */
module.exports = {
  chainWebpack(chainedConfig, env) {
    if (env === 'production') {
      chainedConfig.optimization
        .minimizer('TerserPlugin')
        .init((plugin) => {
          plugin.options.terserOptions.compress.pure_funcs = ['console.log'];
          return plugin;
        });
    }
}
```

* **code splitting**

```javascript
/* riant.config.js */
module.exports = {
  chainWebpack(chainedConfig, env) {
    if (env !== 'test') {
      chainedConfig.optimization
        .splitChunks({
          cacheGroups: {
            vendors: {
              name: `chunk-vendors`,
              test: /[\\/]node_modules[\\/]/,
              priority: -10,
              chunks: 'initial'
            },
            common: {
              name: `chunk-common`,
              minChunks: 2,
              priority: -20,
              chunks: 'initial',
              reuseExistingChunk: true
            }
          }
        });
    }
}
```

### Create .env.production file in the root directory

* **Set env for production**

```env
# Source maps are resource heavy and can cause out of memory issue for large source files.
GENERATE_SOURCEMAP=false

# Some apps do not need the benefits of saving a web request, so not inlining the chunk makes for a smoother build process.
INLINE_RUNTIME_CHUNK=false

IMAGE_INLINE_SIZE_LIMIT=30000
```

### Code Structure

```
+-- your-project
|   +-- riant.config.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src
```

### Use riant-scripts instead of react-scripts in npm scripts of package.json for start、build and test

```diff
  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "riant-scripts start",
-   "build": "react-scripts build",
+   "build": "riant-scripts build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "riant-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}
```
Note: Keep the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making riant-scripts no longer required. 

### Start the Dev Server

```bash
$ npm start
```

### Build your app

```bash
$ npm run build
```

---
_Source: https://npm.io/package/riant-scripts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._