Skip to content

[ Task ]: vite系列插件, 应该支持库模式打包 #186

Open
@FireTable

Description

@FireTable

有的时候我们还需要以 组件库 形式开发, 不单单是以 页面 为最终产物

计划未来我们的 blocklet 模板, 会统一成 vite 框架, 我们应该在 vite-plugin-blocklet, 来直接支撑这个功能

目前 @nft-store/react 已经成功配置对应的功能, 需要后续变成组件


// vite.config.js
import { buildPlugin } from 'vite-plugin-build';

// config
plugins: [
      react(),
      buildPlugin({
        // multiple files build
        fileBuild: {
          emitDeclaration: true,
          esOutputDir: './dist/es',
          commonJsOutputDir: './dist/cjs',
        },
        // single file build
        // libBuild: {
        //   buildOptions: {
        //     rollupOptions: {
        //       external: ['react', 'react-dom'],
        //       output: {
        //         globals: {
        //           react: 'React',
        //           'react-dom': 'react-dom',
        //         },
        //       },
        //     },
        //     lib: {
        //       entry: resolvePath('src/index.jsx'),
        //       name: 'nft-store-react-components',
        //       formats: ['es', 'umd'],
        //       fileName: format => `nft-store-react-components.${format}.js`,
        //     },
        //   },
        // },
      }),
    ],

// package.json

"type": "module",
  "main": "./dist/cjs",
  "module": "./dist/es",
  "typings": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/es",
      "require": "./dist/cjs"
    },
    "./components/": {
      "import": "./dist/es/components/",
      "require": "./dist/cjs/components/"
    }
  },

参考资料

https://cn.vitejs.dev/config/build-options.html#build-lib
https://github.com/samonxian/vite-plugin-build/blob/master/README.zh-CN.md

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions