如何设置package.json react组件库的默认条目

Question

我似乎无法让默认导出在package.json中工作。进口时：

import { Component } from 'packagename/'; // size 22kb
or
import { Component } from 'packagename/dist' // size 22kb;

但

import { Component } from 'packagename'; // size 3mb

我不能告诉用户总是在导入的末尾添加一个/

这是我的package.json

{
  "version": "1.0.0",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.js"
    },
    "./*": "./dist/*",
    "./mylib": "./dist/index.js"
  },
  "scripts": {
    "start": "tsdx watch",
    "build": "NODE_ENV=production tsdx build",
    "build-size": "yarn build && yarn size",
    "build-static-webapp": "npx expo export:web",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "prepare": "tsdx build",
    "size": "size-limit",
    "analyze": "size-limit --why",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "name": "packagename",
  "author": "me",
  "module": "dist/packagename.esm.js",
  "size-limit": [
    {
      "path": "dist/packagename.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/packagename.esm.js",
      "limit": "10 KB"
    }
  ],
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@expo/webpack-config": "^0.17.0",
    "@headlessui/react": "^1.7.2",
    "@size-limit/preset-small-lib": "^8.1.0",
    "@size-limit/webpack": "^8.1.0",
    "@size-limit/webpack-why": "^8.1.0",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/addons": "^6.5.12",
    "@storybook/react": "^6.5.12",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "autoprefixer": "^10.4.11",
    "babel-loader": "^8.2.5",
    "clsx": "^1.2.1",
    "expo": "^46.0.10",
    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "postcss": "^8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.35.0",
    "react-is": "^18.2.0",
    "react-native-web": "~0.18.7",
    "rollup-plugin-postcss": "^4.0.2",
    "size-limit": "^8.1.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "tsdx": "^0.14.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.3"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    }
  },
  "dependencies": {}
}

Answer 1

通过在脚本中添加以下内容来修正它："prepare": "NODE_ENV=production tsdx build"