向npm发布SolidJS类型记录

Question

我有一个solidJS类型记录UI组件，我已经发布到npm注册中心。

该项目的设置如下：

 |-app
   |-index.html
   |-src
     |-index.tsx
     |-App.tsx
     |-utils
       |- ...
     |-components
       |- ....
   |-README.md
   |-package.json
   |-tsconfig.json
   |-vite.config.ts

 |-package
   |-dist
     |-README.md
     |-package.json
     |- ....
   |-src
     |- ....
   |-README.md
   |-package.json
   |-tsconfig.json

我对其进行了分区，以便在包/文件夹中构建库，然后使用npm link命令将其链接到app/中。

包文件夹中的package.json文件如下所示：

{
    "name": "@melodev/<package-name>",
    "version": "...",
    "description": "...",
    "main": "./dist/index.js",
    "module": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "files": [
        "dist/"
    ],
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "clean": "rm -rf dist",
        "build": "npm run clean && tsc && cp package.json README.md ./dist"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/..."
    },
    "devDependencies": {
        "typescript": "^4.7.3"
    },
    "dependencies": {
        "solid-js": "^1.4.7",
        "solid-styled-components": "^0.28.4",
        "solid-transition-group": "^0.0.10"
    },
    "keywords": [
      // ...
    ],
    "author": "melodev",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/..."
    },
    "homepage": "https://github.com/..."
}

使用npm link技术在本地工作。我能用我的部件。

import Component from "@melodev/<package-name>";

问题是从国家预防机制进口软件包根本行不通！我的意思是，软件包被安装了，IDE没有什么可抱怨的，但是当我运行这个应用程序时.控制台中只有一个空白屏幕和一个非常有趣的错误消息：

Uncaught ReferenceError: React is not defined

但它不应该是一个反应元件！

顺便说一下，到目前为止，我的包/tsconfig.json文件看起来是这样的：

{
    "exclude": ["dist", "node_modules"],
    "compilerOptions": {
        "target": "es6",
        "outDir": "./dist",
        "lib": ["esnext", "DOM", "DOM.Iterable"],
        "declaration": true,
        "jsx": "preserve",
        "allowJs": true,
        "esModuleInterop": true,
        "module": "esnext",
        "rootDir": "./src",
        "moduleResolution": "node",
        "sourceMap": true,
        "importHelpers": true,
        "downlevelIteration": true,
        "strict": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "skipDefaultLibCheck": true
    }
}

任何有益的想法/资源都将不胜感激。如果有人能提供一些关于发布SolidJS打字本包的指导，那就太棒了。

Answer 1

如果您想要构建一个使用JSX模板的包(例如<div></div>)，或者依赖于使用它的包，(例如，如果您想发布使用这个模板的第二个包)，那么您必须使用rollup和卷取预置实心来构建它。

如果您不这样做，并且您只发布了预编译的jsx，solid的编译器将无法在构建应用程序时为SSR/SPA模式不同地编译jsx。

您可以签出@solid-原语/道具作为示例。或者使用这个github回购模板。

设置rollup非常简单，您可能只需从包^复制安装粘贴即可。

您可以在rollup预置中启用printInstructions标志，以查看package.json中的模块导出应该是什么样的。

Answer 2

在@thetarnav回答的基础上，也作为面向类似情况的开发人员的资源，我将把我的完整解决方案留在这里。

将SolidJS类型标包发布到npm

1-克隆solid-community/solid-lib-starter

git clone https://github.com/solidjs-community/solid-lib-starter.git

2-用代码替换src文件夹中的内容。

确保在src中创建一个index.tsx文件。使用它文件导出库的组件

export { DatePicker } from './DatePicker';
export { MyComponent } from './MyComponent';
// etc...

4-确保您的package.json看起来或多或少像这样

{
  "version": "0.1.10",
  "name": "{{ package name }}",
  "description": "{{ package description }}",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "dist/esm/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/types/index.d.ts",
  "exports": {
    ".": {
      "solid": "./dist/source/index.jsx",
      "import": "./dist/esm/index.js",
      "browser": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js",
      "node": "./dist/cjs/index.js"
    }
  },
  "scripts": {
    "build": "rollup -c",
    "prepublishOnly": "pnpm build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/{{ git repository }}.git"
  },
  "keywords": [],
  "author": "{{ author name }}",
  "license": "MIT",
  "homepage": "https://github.com/{{ git repository }}#readme",

  "dependencies": {
    "solid-js": "^1.1.7",
    "solid-styled-components": "^0.28.4",
    "solid-transition-group": "^0.0.10"
  },
  "devDependencies": {
    "rollup": "^2.58.0",
    "rollup-preset-solid": "^1.0.1",
    "typescript": "^4.4.4"
  }
}

5-运行pnpm i来安装所有依赖项。

6-确保在根级别有一个rollup.config.js文件

import withSolid from 'rollup-preset-solid';

export default withSolid({
  input: "src/index.tsx",
  targets: ["esm", "cjs"],
  printInstructions: true,
});

printInstructions: true会提示您package.json中的路径应该是什么样子

7-在根级别设置tsconfig.json。(这些设置对我来说很好，但这里有很大的定制空间)

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "declaration": true,
    "moduleResolution": "node",
    "declarationDir": "./types",
    "emitDeclarationOnly": true,
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "noImplicitAny": false
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]
}

8-不要忘记添加一个README.md文件

9-运行pnpm build.

这将触发使用rollup的生成，并且应该创建包含四个文件夹的dist文件夹：

• cjs
• esm
• 来源
• 类型

运行npm publish --access=public将包发布到npm注册表