@lemon-clown-wpg/rollup-config-react

Usage

Install

yarn add --dev @lemon-clown-wpg/rollup-config-react

Demo

• Add package.json

  {
    "name": "react-hello-world",
    "version": "0.0.0",
    "scripts": {
      "start": "rollup -w -c rollup.config.js",
      "build": "rollup -c rollup.config.js"
    },
    "dependencies": {
      "@types/classnames": "^2.2.9",
      "@types/react": "^16.9.23",
      "@types/react-dom": "^16.9.5",
      "classnames": "^2.2.6",
      "react": "^16.13.0",
      "react-dom": "^16.13.0"
    },
    "devDependencies": {
      "@lemon-clown-wpg/eslint-config-react": "^0.0.3",
      "@lemon-clown-wpg/rollup-config-react": "^0.0.2",
      "rollup": "^1.31.1",
      "stylus": "^0.54.7"
    },
    "browserslist": [
      "last 2 versions",
      "Firefox ESR",
      "> 1%",
      "ie >= 11"
    ]
  }

• Install dependencies

  yarn install

• create .eslintc

  {
    "extends": [
      "@lemon-clown-wpg/eslint-config-react"
    ],
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "rules": {
    }
  }

• create tsconfig.json

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "strict": true,
      "strictNullChecks": true,
      "noUnusedLocals": false,
      "noUnusedParameters": false,
      "noImplicitAny": true,
      "noImplicitThis": true,
      "noImplicitReturns": false,
      "alwaysStrict": true,
      "suppressImplicitAnyIndexErrors": true,
      "newLine": "LF",
      "removeComments": false,
      "composite": true,
      "declarationMap": true,
      "declaration": true,
      "sourceMap": true,
      "pretty": false,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true,
      "forceConsistentCasingInFileNames": true,
      "downlevelIteration": true,
      "outDir": "lib",
      "rootDir": "src",
      "target": "es5",
      "module": "esnext",
      "jsx": "react",
      "lib": [
        "esnext",
        "dom",
        "dom.iterable"
      ]
    },
    "include": [
      "src"
    ]
  }

• Create rollup configuration rollup.config.js

  import path from 'path'
  import * as react from 'react'
  import * as reactDOM from 'react-dom'
  import { createRollupConfig } from '@lemon-clown-wpg/rollup-config-react'
  import manifest from './package.json'
  
  const paths = {
    eslintrc: path.resolve(__dirname, '.eslintrc'),
    tsconfig: path.resolve(__dirname, 'tsconfig.json'),
  }
  
  const config = createRollupConfig({
    manifest,
    preprocessOptions: {
      stylesheets: {
        input: 'src/**/*.styl',
        multiEntryOptions: {
          exports: false,
        },
        postcssOptions: {
          modules: {
            camelCase: true,
          },
        }
      }
    },
    pluginOptions: {
      eslintOptions: {
        configFile: paths.eslintrc,
        include: ['src/**/*{.ts,.tsx}'],
        exclude: ['src/**/*.styl.d.ts'],
      },
      typescriptOptions: {
        tsconfig: paths.tsconfig,
        include: ['src/**/*{.ts,.tsx}'],
        exclude: '**/__tests__/**',
      },
      commonjsOptions: {
        include: ['../../node_modules/**'],
        exclude: ['**/*.stories.js'],
        namedExports: {
          'react': Object.keys(react),
          'react-dom': Object.keys(reactDOM),
        },
      },
      postcssOptions: {
        // extract: true,
        // minimize: false,
        extract: false,
        minimize: true,
        modules: {
          camelCase: true,
          generateScopedName: 'wpg-[local]',
        },
      }
    }
  })
  
  export default config

• Create a entry file src/index.tsx

  import React from 'react'
  import classes from './style.styl'
  
  
  export interface HelloWorldProps {
    content?: string
  }
  
  
  export function HelloWorld(props: HelloWorldProps): React.ReactElement {
    const { content = 'Hello, world!' } = props
    return (
      <div className={ classes.container }>
        <h1 className={ classes.content }>{ content }</h1>
      </div>
    )
  }

• Create a stylus file src/index.styl

  .container
    display: flex
    .content
      font-family: 'Comic Sans', sans-serif
      font-size: 18px
      color: #1a1a1a
      line-height: 1.75

• Commands:

  • yarn build
  • yarn start

Options

manifest

property	required	description
source	true	source entry file
main	false	cjs target entry file
module	false	cjs target entry file

preprocessOptions

stylesheet

property	required	description
input	true	see Supported Input Types
output	false
pluginOptions	false

• pluginOptions:

  property	required	description
  multiEntryOptions	false	options for @rollup/plugin-multi-entry
  postcssOptions	false	options for @lemon-clown-wpg/rollup-plugin-postcss-dts

pluginOptions

property	required	description
eslintOptions	false	options for rollup-plugin-eslint
nodeResolveOptions	false	options for @rollup/plugin-node-resolve
commonjsOptions	false	options for @rollup/plugin-commonjs
typescriptOptions	false	options for rollup-plugin-typescript2
peerDepsExternalOptions	false	options for rollup-plugin-peer-deps-external
postcssOptions	false	options for @lemon-clown-wpg/rollup-plugin-postcss-dts

References

• @lemon-clown-wpg/react-hello-world