WebPack-React-TypeScript：加載 CSS 並導出類型

Question

問題

我正在構建一個 UI 組件庫以在我的項目中重用。 該庫使用 TypeScript 和 React 編寫，並使用 WebPack 構建。

.
├── README.md
├── dist
├── index.js
├── package-lock.json
├── package.json
├── src
│   ├── Span
│   │   ├── Span.less
│   │   └── index.tsx
│   └── Tag
│       ├── Tag.less
│       └── index.tsx
├── tsconfig.json
├── types
│   └── custom.d.ts
└── webpack.config.js

每個組件都作為命名模塊導出。 在 WebPack 中，我將每個.ts文件作為一個條目，通過ts-loader和 output 將其傳遞到另一個文件夾中的dist文件夾，該文件夾具有模塊的名稱。 然后我處理 TypeScript 聲明文件並將它們發送到這個文件夾結構。 使用根文件夾中的 index.js 文件，我從其文件夾中導入每個模塊，並使用 commonjs 語法將其導出為命名模塊。

// ./index.js
exports.Span = require('./dist/Span').Span;
exports.Tag = require('./dist/Tag').Tag;

在 package.json 中，我將 npm 模塊的files聲明為[ "/dist", "index.js" ] ； 因此，已發布的 npm 模塊將是：

.
├── dist
│   ├── Span
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   └── index.js.map
│   └── Tag
│       ├── index.d.ts
│       ├── index.js
│       └── index.js.map
└── index.js

最后，從我的客戶端代碼中，我可以將這些組件作為命名模塊導入，例如：

// client code
import { Span, Tag } from 'components_library_example';

我的問題是：

1. 目前未加載 css 文件。

   • 為什么我的客戶端代碼無法讀取內聯的 css 代碼？
   • 另一種解決方案是使用MiniCssExtractPlugin提取 css，並從index.js導入 styles； 理論上很容易，但實際上，這似乎是不可能的。 那里有什么好的方法嗎？

2. 目前，當我導入組件時，typescript 無法識別聲明文件，因此我丟失了所有類型。

   • ¿如何導出index.js中的模塊以保持對 .d.ts 聲明文件的訪問？

謝謝！

---

注意：我的 webpack 配置：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  name: 'server',
  entry: {
    Span: path.join(__dirname, 'src/Span/index.tsx'),
    Tag: path.join(__dirname, 'src/Tag/index.tsx'),
  },
  output: {
    filename: '[name]/index.js',
    path: path.join(__dirname, 'dist'),
    libraryTarget: 'commonjs2',
    globalObject: "(typeof self !== 'undefined' ? self : this)", 
    library: 'MyLib',
    umdNamedDefine: true,
  },
  target: 'node',
  devtool: '#source-map',
  externals: [nodeExternals(), 'react'],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        loader: ['ts-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.(less|css)$/,
        use: ['css-loader', 'less-loader'],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  stats: 'errors-only',
  plugins: [
    new CleanWebpackPlugin({
      dry: false,
      verbose: true,
      protectWebpackAssets: false,
      cleanOnceBeforeBuildPatterns: [path.join(__dirname, 'dist', '/**/*')],
    }),
  ],
};

Answer 1

首先， webpack 不是最適合制作庫的工具目前，您的每個組件都包含大量重復的運行時內容。 將組件轉換為 es 模塊可能就足夠了，因為您可能會將它們捆綁為某些應用程序的一部分。

目前未加載 css 文件。 為什么我的客戶端代碼無法讀取內聯的 css 代碼？

您的 styles 包含在捆綁文件中，但不會應用。 Styles 應該以某種方式注入到頁面中，並且通常使用樣式加載。 注入是一種副作用，因此您的庫不會是可搖樹的。

根據您將如何使用該庫，我建議避免在組件和以下之一中導入 styles：

1. 如果消費應用程序使用 webpack 並且將處理自己的更少文件，則將它們作為更少的文件提供給消費者
2. 處理更少的文件並公開一個 css 文件，您可以以任何方式將其包含到 index.html 中。 它可能適合沒有構建過程的消費者，比如簡單的 static html。 是的，這似乎不太可能，因為您的組件需要做出反應:)
3. 使用一些css-in-js解決方案。 這是 2020 年大多數 React 庫使用的方式。

目前，當我導入組件時，typescript 無法識別聲明文件，因此我丟失了所有類型。 您可以在庫的根目錄中添加index.d.ts文件並重新導出那里的所有組件類型

export * from './src/Span';
export * from './src/Tag';

如果要將它們放在其他地方，則需要在 package.json 中指定types字段