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
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
npx tsc --init
update ts config
{
"compilerOptions": {
"target": "es5",
"jsx": "react",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
update babel config
module.exports = {
presets: [
"@babel/preset-react",
"@babel/preset-env",
"@babel/preset-typescript"
],
};
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()]),
}
update tailwind config
module.exports = {
purge: [
'./src/**/*.tsx',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
rename component extension
-
Button.js
toButton.tsx
-
Header.js
toHeader.tsx
-
index.js
toindex.ts
compile
npm run build -w @fstr/component
Final source code: https://github.com/ynwd/monorepo/tree/typescript
Top comments (0)