使用 TypeScript 和 Less 文件创建组件库答案

【问题标题】：Create components library with TypeScript and Less files使用 TypeScript 和 Less 文件创建组件库
【发布时间】：2020-01-14 17:31:55
【问题描述】：

我正在构建一个包含按钮、输入、文本区域等组件的 React UI 库，我们称之为mylib。我将在许多项目中重用它，例如在myApp 中。我将使用 TypeScript，所以我必须将其编译为 ES6。并且它将使用.less 文件进行样式设置。

我的问题是关于.less 文件。我不知道正确的方法是什么：我应该在myLib 还是myApp 中编译它们？是否可以只使用 TypeScript 编译器，或者出于任何原因也使用 Webpack 更好？我尝试了，但我不确定它是否正确。

我对此的看法是在 myLib 中编译 TypeScript，但让 myApp 编译 .less 文件：我在 src 文件夹中有源代码，我将它编译到 dist 文件夹中TypeScript 编译器。然后在同一个脚本中，我将.less 文件从src 复制到dist，使用cd src && find . -name '*.less' -exec rsync -R {} ../dist ';' 维护它们的相对路径。

这是编译前mylib的树：

.
├── 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

这是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;

这是MyComponent.less：

@c: .MyComponent;

@{c} {
    font-size: 20px;
    color: tomato;
}

tsconfig.json的内容是：

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "jsx": "react",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "outDir": "dist"
  }
}

而package.json的内容是：

{
  "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",
  }
}

编译后我得到这个：

.
├── 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

然后从myApp我应该能够导入MyComponent并让myApp编译less文件。

这种方法听起来对你正确吗？

【问题讨论】：

正确是什么意思？这种方法是否有效（例如，您是否尝试过实施它）？
嗯，它有效。但我知道它现在是黑白的，出于不同的原因，这里可能有很多方法。我想知道哪个更好以及为什么。
这听起来像是一个广泛/基于意见的问题，可能更适合softwareengineering.stackexchange.com
可能是。如果我的结构存在缺陷，或者可能不是，这就是这个问题的意义所在。
如果它有效，那么就没有缺陷。如果您只是想知道它是否可以“更好”，那么您就进入了主观领域，因为“更好”并没有以客观的方式明确定义。如果您对这种方法有具体的顾虑，例如在某些情况下，这种结构根本不起作用，您可以改写问题来询问这个问题。否则，它只是要求进行一般性代码审查，一方面过于宽泛，另一方面基于意见，要么应该在 Software Engieering 上，要么甚至应该在 codereview.stackexchange.com/help/on-topic。

标签： javascript typescript npm webpack bundle

【解决方案1】：

[less files:] 我应该在 myLib 中还是在 myApp 中编译它们？

您的组件库应提供.less 源代码和.css 输出
.css 适合非少消费者，因此他们仍然可以使用您的样式
.less 适合那些可能使用诸如 mixins 之类的不太具体的功能的消费者

是否可以只使用 TypeScript 编译器，或者出于任何原因同时使用 Webpack 更好？

是的，理想情况下，您的组件库应该只使用 typescript 编译器来生成 dist/**/*.js 文件
将捆绑、缩小、优化、polyfill 和这些类型的问题留给消费应用程序处理
您还应该配置您的 tsconfig.json 以生成 .d.ts 声明文件与 javascript 输出并排（以便打字稿消费者可以从打字/代码提示/自动完成中受益）
- 将"declaration": true 添加到您的`tsconfig.json
- 您可能还想添加源映射以使用"sourceMap": true 进行调试

【讨论】：