如何正确构建react模块化库

Question

我正在尝试创建一个基于Typescript和SASS的react组件库。组件库将用于多个其他类型脚本项目，因此也需要类型导出。理想情况下，我想模仿类似"；材料UI"/"React Bootrap"；库dist输出解决方案。

示例项目结构：

|Tabs
+--Tabs.tsx
+--Tabs.scss 
+--index.tsx
index.tsx

索引.tsx

export { Tabs } from './Tabs/Tabs';

选项卡/索引.tsx

import React from 'react';
import './Tabs.scss';
interface TabsProps {
...
}
export const Tabs: React.FC<TabsProps> = (props) => <div>...</div>

选项卡/索引.tsx

export { Tabs } from './Tabs';

预期构建的dist结构应模仿src结构：

|Tabs
+--Tabs.js
+--Tabs.d.ts
+--index.js
+--index.d.ts
index.js
index.tsx

我试着分析开源项目，看看他们是如何构建库的，但我找不到使用可以重用的相同方法的库。

我尝试过的解决方案：

Webpack：虽然我可以编译typescript和sass文件，但Webpack总是只发出输出部分中指定的一个文件，这些文件通常是绑定的，我将失去从特定组件的模块导入单个组件的能力。我知道我可以指定多个入口点，但该项目将有很多导出，手动指定它们不是一个选项。。。

我尝试过的配置示例：

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
module: {
rules: [
// sass-loader is not used here yet, but should be once desired structure can be reached
{
test: /.tsx?$/,
loader: 'babel-loader',
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /.js$/, loader: "source-map-loader" }
]
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
extensions: [".tsx", ".ts", ".js"],
plugins: [
new TsconfigPathsPlugin({ configFile: "./tsconfig.build.json" })
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};

汇总：类似于webpack 的情况

我尝试过的配置示例：

// rollup.config.js
import babel from 'rollup-plugin-babel';
import sass from 'rollup-plugin-sass';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import react from 'react';
import reactDom from 'react-dom';
const babelOptions = {
exclude: /node_modules/,
// We are using @babel/plugin-transform-runtime
runtimeHelpers: true,
extensions: ['.js', '.ts', '.tsx'],
configFile: './babel.config.js',
};
const nodeOptions = {
extensions: ['.js', '.tsx', '.ts'],
};
const commonjsOptions = {
ignoreGlobal: true,
include: /node_modules/,
namedExports: {
react: Object.keys(react),
'react-dom': Object.keys(reactDom)
},
};
export default {
input: 'src/index.tsx',
output: {
name: '[name].js',
dir: 'dist',
format: 'umd',
sourcemap: true,
},
plugins: [
nodeResolve(nodeOptions),
sass(),
commonjs(commonjsOptions),
babel(babelOptions)
],
};

Babel：我设法编译了typescript代码，但一旦我接近于传输SASS文件，我最终会建议使用webpack。。。

TSC：我可以成功地运行typescript编译器，它可以毫无问题地编译所有文件，并保持相同的结构。然而TSC不支持其他的transpiling选项，所以经过大量搜索，我最终会建议使用webpack和"；ts加载器"；或"；babel loader"；。。

tsconfig:

{
"extends": "../../tsconfig.build.json",
"compilerOptions": {
"lib": [ "es2015", "dom" ],
"outDir": "dist",
"baseUrl": ".",
"declaration": true,
"composite": true,
"module": "commonjs",
"target": "es5"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}

强制解决方案：我应该能够在编译库并将其安装在另一个项目中之后，能够运行以下程序：

import { Tabs } from 'my-lib/Tabs';
import { Tabs } from 'my-lib';

Answer 1

经过一番周旋，我终于用rollup产生了想要的结果。当前配置的唯一缺点是不支持在--watch模式下新添加的文件。魔术设置在输出下。preserveModules

配置：

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import postcssUrl from 'postcss-url';
import resolve from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
export default {
input: 'src/index.tsx',
output: {
dir: 'dist',
format: 'es',
preserveModules: true,
sourcemap: true,
},
plugins: [
resolve(),
peerDepsExternal(),
commonjs(),
typescript({
tsconfig: 'tsconfig.build.json'
}),
postcss({
minimize: true,
modules: {
generateScopedName: "[hash:base64:5]"
},
plugins: [
postcssUrl({
url: "inline"
})
]
}),
],
};

我希望这个配置也能帮助其他

Answer 2

您可以签出此回购。我为构建库做了一些更改。

https://github.com/21paradox/react-webpack-typescript-starter

使用如下库：

import Input from 'my-custom-ui/entry/Input';
import { Input } from 'my-custom-ui';

经过大量搜索，我最终编写了一个插件来手动生成webpack所需的webpack入口代码(用于构建ui库(。

多条目+手动生成的条目文件似乎适用于组件分离&无冗余代码。如果你想建立一个基于vue的库，这也是非常有帮助的。