DEV Community

ynwd
ynwd

Posted on

How to setup react, tailwind, webpack and typescript in a monorepo

#typescript #webpack #react #monorepo

Previously, we have created configuration for react, tailwind, webpack in monorepo using npm workspaces.

Now we will use typescript.

. ├── babel.config.js ├── package.json ├── postcss.config.js ├── src │ ├── Button.tsx │ ├── Header.tsx │ ├── index.css │ └── index.ts ├── tailwind.config.js ├── tsconfig.json └── webpack.config.js
Enter fullscreen mode Exit fullscreen mode

Clone previous repo: https://github.com/ynwd/monorepo/tree/tailwind

install all typescript-react related packages

npm i typescript ts-loader @types/react-dom @types/react @babel/preset-typescript -D
Enter fullscreen mode Exit fullscreen mode 
npx tsc --init
Enter fullscreen mode Exit fullscreen mode

update ts config

{ "compilerOptions": { "target": "es5", "jsx": "react", "module": "commonjs", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true } }
Enter fullscreen mode Exit fullscreen mode

update babel config

module.exports = { presets: [ "@babel/preset-react", "@babel/preset-env", "@babel/preset-typescript" ], };
Enter fullscreen mode Exit fullscreen mode

update webpack config

const MiniCssExtractPlugin = require("mini-css-extract-plugin") const devMode = process.env.NODE_ENV !== "production" module.exports = { mode: devMode ? "development" : "production", entry: { index: { import: "./src/index.ts" } }, resolve: { extensions: ['.tsx', '.ts', '.js'], }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader", }, { test: /\.(ts|tsx)$/, exclude: /node_modules/, loader: "ts-loader", }, { test: /\.css$/i, use: [ devMode ? "style-loader" : MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader", ], }, ], }, output: { filename: "components.bundle.min.js", library: 'fstrComponents', libraryTarget: 'umd', clean: true }, plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]), }
Enter fullscreen mode Exit fullscreen mode

update tailwind config

module.exports = { purge: [ './src/**/*.tsx', ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: {}, plugins: [], }
Enter fullscreen mode Exit fullscreen mode

rename component extension

  • Button.js to Button.tsx
  • Header.js to Header.tsx
  • index.js to index.ts

compile

npm run build -w @fstr/component
Enter fullscreen mode Exit fullscreen mode

Final source code: https://github.com/ynwd/monorepo/tree/typescript

Top comments (0)