I'm currently in the process of creating a React UI library that will consist of various components such as Buttons, Inputs, textareas, etc. This library, which I've temporarily named mylib, will be reused across multiple projects including one called myApp. To ensure type safety, I plan to use TypeScript which requires compilation to ES6. Additionally, I'll be using .less files for styling purposes.
My main concern revolves around handling the .less files. Should I compile them within the myLib itself or delegate this task to the myApp? Is it sufficient to rely solely on the TypeScript compiler, or would it be beneficial to incorporate Webpack for any specific reasons? Despite my efforts, I remain uncertain whether my current approach is the most effective one.
My proposed strategy involves compiling TypeScript code within myLib, while allowing myApp to handle the .less files: Initially, I organize the source code in the src folder and compile it into a destination folder named dist with the TypeScript compiler. Subsequently, by executing a designated script, I copy the relevant .less files from src to dist while preserving their relative paths using the command
cd src && find . -name '*.less' -exec rsync -R {} ../dist ';'This outlines the directory structure of mylib before compilation:
.
├── README.md
├── dist // destination folder
├── package.json
├── src
│ ├── components
│ │ └── MyComponent
│ │ ├── MyComponent.less
│ │ └── MyComponent.tsx
│ ├── css
│ │ ├── constants.less
│ │ ├── imports.less
│ │ └── reset.less
│ └── index.tsx
└── tsconfig.json
Here's the contents of MyComponent.tsx:
import React from 'react';
import './MyComponent.less';
class MyComponent extends React.Component {
render() {
return <div className="MyComponent">My component</div>;
}
}
export default MyComponent;
This demonstrates the content of MyComponent.less:
@c: .MyComponent;
@{c} {
font-size: 20px;
color: tomato;
}
The configuration details specified in tsconfig.json are as follows:
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"jsx": "react",
"esModuleInterop": true,
"moduleResolution": "node",
"outDir": "dist"
}
}
Furthermore, the accompanying package.json contains these specifications:
{
"name": "@me/mycomponents",
"version": "0.0.0",
"description": "Components library",
"scripts": {
"build": "tsc -d && cd src && find . -name '*.less' -exec rsync -R {} ../dist ';' && cd .."
},
"devDependencies": {
"typescript": "^3.6.2",
"react-dom": "^16.9.0"
},
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.9.0",
}
}
Upon completion of compilation, the structure transforms into:
.
├── README.md
├── dist
│ ├── components
│ │ └── MyComponent
│ │ ├── MyComponent.d.ts
│ │ ├── MyComponent.js
│ │ └── MyComponent.less
│ ├── css
│ │ ├── constants.less
│ │ ├── imports.less
│ │ └── reset.less
│ ├── index.d.ts
│ └── index.js
├── package.json
├── src
│ ├── components
│ │ └── MyComponent
│ │ ├── MyComponent.less
│ │ └── MyComponent.tsx
│ ├── css
│ │ ├── constants.less
│ │ ├── imports.less
│ │ └── reset.less
│ └── index.tsx
└── tsconfig.json
Therefore, once imported into myApp, MyComponent should seamlessly integrate with the ability to compile the associated less files within the same environment.
Does this methodology align with your expectations?