如何使用Vite构建SolidJS自定义库并在SolidJS应用中使用

一、构建SolidJS自定义库 #

1. 初始化库项目 #

先创建项目目录并初始化npm：

mkdir solid-ui-lib && cd solid-ui-lib && npm init -y

安装必要依赖：

npm install solid-js vite vite-plugin-solid --save-dev

2. 配置Vite #

在项目根目录创建vite.config.js，配置库模式打包：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  build: {
    lib: {
      entry: './src/index.jsx', // 你的库入口文件路径
      name: 'SolidUILib', // UMD模式下的全局变量名
      fileName: (format) => `solid-ui-lib.${format}.js`,
      formats: ['es', 'umd'] // 输出ES模块和UMD两种格式，适配不同场景
    },
    rollupOptions: {
      // 排除solid-js核心依赖，让宿主项目自行提供，避免重复打包
      external: ['solid-js'],
      output: {
        // UMD模式下映射外部依赖的全局变量
        globals: {
          'solid-js': 'SolidJS'
        }
      }
    }
  }
});

3. 编写库代码 #

比如创建一个简单的Button组件：
src/components/Button.jsx

import { JSX } from 'solid-js';

export const Button = ({ children, onClick }) => {
  return (
    <button 
      onClick={onClick}
      style={{ padding: '8px 16px', border: 'none', borderRadius: '4px', cursor: 'pointer', backgroundColor: '#007bff', color: 'white' }}
    >
      {children}
    </button>
  );
};

在入口文件src/index.jsx中导出组件：

export { Button } from './components/Button';

4. 打包并配置package.json #

在package.json中添加打包脚本：

{
  "scripts": {
    "build": "vite build"
  }
}

运行npm run build，打包产物会生成在dist目录。

同时完善package.json的入口配置，方便用户导入：

{
  "name": "solid-ui-lib", // 你的库名称，需唯一（发布npm时）
  "main": "./dist/solid-ui-lib.umd.js",
  "module": "./dist/solid-ui-lib.es.js",
  "files": ["dist"] // 指定发布时包含的文件
}

如果用TypeScript，还需配置types字段指向生成的类型文件。

二、在SolidJS应用中使用自定义库 #

1. 本地测试（未发布到npm） #

• 在库项目根目录执行：npm link
• 在你的SolidJS应用项目根目录执行：npm link solid-ui-lib（替换为你的库名称）
• 之后即可在应用中导入使用：

import { Button } from 'solid-ui-lib';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <Button onClick={() => alert('自定义按钮被点击！')}>我的自定义按钮</Button>
    </div>
  );
}

export default App;

2. 发布到npm后使用 #

• 先登录npm：npm login
• 发布库：npm publish（确保package.json的name未被占用）
• 在SolidJS应用中安装：npm install solid-ui-lib
• 导入使用方式和本地测试完全一致。

注意事项 #

• 必须通过Vite的external配置排除solid-js，否则会导致宿主项目中出现多个SolidJS实例，引发异常
• 若使用TypeScript，需配置tsconfig.json开启类型生成，提升用户体验

内容的提问来源于stack exchange，提问作者alveomaster