小编Sor*_*ste的帖子

我正在尝试在我的应用程序上实现一个简单的地图，但在使用下面来自 React Leaflet 的示例代码时遇到此错误。

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export default function App() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
            <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
        </Marker>
    </MapContainer>
  );
}

错误：

Type '{ children: Element[]; center: number[]; zoom: number; scrollWheelZoom: boolean; }' is not assignable to type 'IntrinsicAttributes & MapContainerProps'.
  Property 'center' does not exist on type …

我想将 eslint import/order 配置为自定义配置，但我无法使其在反应打字稿文件中工作。

这是我的规则：

"import/order":[
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups":[{
          "pattern": "react",
          "group": "external",
          "position": "before"
        }],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive":true
        }
      }
    ]

.eslintrc.json 文件：

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 6,
    "project": "./tsconfig.json"
  },
  "env": {
    "browser": true,
    "jest": true,
    "es6": true
  },
  "extends": [
    "airbnb-typescript",
    "airbnb/hooks",
    "prettier",
    "prettier/react",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jest/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "react",
    "react-hooks",
    "import",
    "@typescript-eslint", …

几个小时后，我成功使用 vite 构建了具有多个入口点的自定义库。我想知道是否有更好的方法来解决这个问题。

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/index.ts'),
        hooks: resolve(__dirname, 'src/hooks.ts'),
      },
      external: [...Object.keys(peerDependencies), ...Object.keys(dependencies)],
      output: [
        {
          dir: resolve(__dirname, 'dist'),
          format: 'es',
          entryFileNames: "[name].[format].js",
          globals: {
            react: 'React',
          },
        },
        {
          dir: resolve(__dirname, 'dist'),
          format: 'cjs',
          entryFileNames: "[name].[format].js",
          globals: {
            react: 'React',
          },
        }
      ],
    },
    sourcemap: true,
  }
})

构建生成此文件：