Univer
Univer Doc
开始使用
简化引入

使用 Univer Plugins

📊📝📽️ Univer General

对于初次接触 Univer 的人来说,插件化的设计可能会带来以下困惑:

  • 如何判断一个插件是否包含样式文件?
  • 如何确保插件样式文件的加载顺序正确?
  • 如何知晓一个插件是否包含语言包?

这些问题的解答可能并不简单,因此我们提供了一些构建工具插件,它们是解决以上问题的最佳实践。这些插件会自动按需引入样式文件、生成语言包等,让你不再需要担心这些问题。

我们提供了的构建工具插件支持以下构建工具,你可以根据自己的构建工具选择合适的插件。

ViteesbuildWebpack

Vite 插件

安装

pnpm add @univerjs/vite-plugin -D

使用

将插件添加到 vite.config.ts:

import { defineConfig } from 'vite'
import { univerPlugin } from '@univerjs/vite-plugin'
 
export default defineConfig({
  plugins: [
    univerPlugin()
  ]
})

特性

自动引入样式文件

这个特性默认是开启的。你可以通过传递 css: false 到插件选项来禁用它。

export default defineConfig({
  plugins: [
    univerPlugin({
+      css: false
    })
  ]
})

简化语言包引入

插件提供了一个虚拟模块 univer:locales,它简化了语言包的引入。

import { LocaleType } from '@univerjs/core'
 
import { zhCN, enUS } from 'univer:locales'
 
new Univer({
  locales: {
    [LocaleType.ZH_CN]: zhCN,
    [LocaleType.EN_US]: enUS
  }
})

TypeScript 支持

为了让 TypeScript 能够识别 univer:locales 的引入,你需要在项目中添加一个 src/vite-env.d.ts 文件。

/// <reference types="vite/client" />
+ /// <reference types="@univerjs/vite-plugin/types" />

选项

  • css: boolean - 是否自动引入所需的 CSS。默认为 true

ESbuild 插件

安装

pnpm add @univerjs/esbuild-plugin -D

使用

如果你使用的是 esbuild API,你可以将插件添加到构建配置中:

import esbuild from 'esbuild'
 
esbuild.build({
  plugins: [
    univerPlugin()
  ],
})

特性

自动引入样式文件

这个特性默认是开启的。你可以通过传递 css: false 到插件选项来禁用它。

esbuild.build({
  plugins: [
    univerPlugin({
+     css: false
    })
  ],
})

简化语言包引入

插件提供了一个虚拟模块 univer:locales,它简化了语言包的引入。

import { LocaleType } from '@univerjs/core'
 
import { zhCN, enUS } from 'univer:locales'
 
new Univer({
  locales: {
    [LocaleType.ZH_CN]: zhCN,
    [LocaleType.EN_US]: enUS
  }
})

TypeScript 支持

为了让 TypeScript 能够识别 univer:locales 的引入,你需要在项目中添加一个 tsconfig.json 文件。

{
  "compilerOptions": {
+    "types": ["@univerjs/esbuild-plugin/types"]
  }
}

选项

  • css: boolean - 是否自动引入所需的 CSS。默认为 true

Webpack 插件

安装

pnpm add @univerjs/webpack-plugin -D

使用

将插件添加到 webpack.config.js

import { UniverPlugin } from '@univerjs/webpack-plugin'
 
export default {
  plugins: [
+    new UniverPlugin()
  ]
}

特性

自动引入样式文件

这个特性默认是开启的。你可以通过传递 css: false 到插件选项来禁用它。

export default defineConfig({
  plugins: [
    new UniverPlugin({
+      css: false
    })
  ]
})

简化语言包引入

插件提供了一个虚拟模块 univer:locales,它简化了语言包的引入。

import { LocaleType } from '@univerjs/core'
 
import { zhCN, enUS } from 'univer:locales'
 
new Univer({
  locales: {
    [LocaleType.ZH_CN]: zhCN,
    [LocaleType.EN_US]: enUS
  }
})

TypeScript 支持

为了让 TypeScript 能够识别 univer:locales 的引入,你需要在项目中添加一个 src/webpack-env.d.ts 文件。

+ /// <reference types="@univerjs/webpack-plugin/types" />

选项

  • css: boolean - 是否自动引入所需的 CSS。默认为 true

Copyright © 2021-2024 DreamNum Co,Ltd. All Rights Reserved.