0.0.4 • Published 4 years ago
@lemon-clown-wpg/rollup-config-react v0.0.4
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-entrypostcssOptions
|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 |