CDN으로 Web SDK 가져오기

패키지 관리자를 사용하지 않는 경우에도 <script> 태그를 통해 Univer를 가져올 수 있습니다.

네임스페이스 규칙

Univer의 전역 빌드(UMD)는 다음 명명 규칙에 따라 전역 객체에 네임스페이스를 노출합니다.

text
@univerjs/core -> UniverCore@univerjs/docs-ui -> UniverDocsUi@univerjs-pro/docs-print -> UniverProDocsPrint@univerjs/docs-ui/locale/en-US -> UniverDocsUiEnUS@univerjs/core/facade -> UniverCoreFacade

플러그인 모드

전역 빌드 사용하기

Univer는 플러그인용 UMD 빌드를 제공합니다. CDN 스크립트 태그를 사용할 때는 각 플러그인과 그 종속 항목의 UMD 빌드를 직접 포함해야 합니다. 이 과정은 번거로우므로 플러그인 간 종속 관계와 스타일 파일의 순서를 비롯한 플러그인 메커니즘을 충분히 이해한 후에만 사용하는 것이 좋습니다.

예제

HTML
<head>  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>  <script>    /**     * Starting from Univer 0.6.0, with the support for React 19[^1], UMD users may need additional adaptation.     * It is recommended to migrate to module script[^2] and a more modern build system.     *     * [^1]: [support for React 19] https://github.com/dream-num/univer/pull/4247     * [^2]: [Module Script] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html     */    /**     * Fix `Uncaught TypeError: client.createRoot is not a function`     * If using UMD React < 18, you might need the following code.     */    ;(function (global) {      'use strict'      if (!global.ReactDOM) {        throw new Error('ReactDOM must be loaded before ReactCreateRoot.')      }      const ReactDOM = global.ReactDOM      if (!ReactDOM.createRoot) {        ReactDOM.createRoot = function (container) {          return {            render: (element) => {              ReactDOM.render(element, container)            },          }        }      }    })(this)    /**     * Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`     * If using UMD React, you might need the following code.     * Reference: https://unpkg.com/react@18.3.1/cjs/react-jsx-runtime.production.min.js     */    ;(function (global) {      'use strict'      if (!global.React) {        throw new Error('React must be loaded before ReactJSXRuntime.')      }      const React = global.React      if (!React.jsx || !React.jsxs) {        const REACT_ELEMENT_TYPE = Symbol.for('react.element')        const hasOwnProperty = Object.prototype.hasOwnProperty        const RESERVED_PROPS = {          key: true,          ref: true,          __self: true,          __source: true,        }        const ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner        function createReactElement(type, config, maybeKey) {          const props = {}          let key = null          let ref = null          if (maybeKey !== undefined) {            key = `${maybeKey}`          }          if (config.key !== undefined) {            key = `${config.key}`          }          if (config.ref !== undefined) {            ref = config.ref          }          for (var propName in config) {            if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {              props[propName] = config[propName]            }          }          if (type && type.defaultProps) {            const defaultProps = type.defaultProps            for (var propName in defaultProps) {              if (props[propName] === undefined) {                props[propName] = defaultProps[propName]              }            }          }          return {            $$typeof: REACT_ELEMENT_TYPE,            type,            key,            ref,            props,            _owner: ReactCurrentOwner.current,          }        }        React.jsx = createReactElement        React.jsxs = createReactElement      }    })(this)  </script>  <script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"></script>  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>  <script src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/index.js"></script>  <script src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/react-bindings/index.js"></script>  <script src="https://unpkg.com/@univerjs/themes/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/protocol/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/core/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/rpc/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/design/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/engine-render/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/drawing/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/index.js"></script>  <script src="https://unpkg.com/@univerjs/core/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/ui/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/facade.js"></script>  <script src="https://unpkg.com/@univerjs/design/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/en-US.js"></script>  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/en-US.js"></script>  <link rel="stylesheet" href="https://unpkg.com/@univerjs/design/lib/index.css" />  <link rel="stylesheet" href="https://unpkg.com/@univerjs/ui/lib/index.css" />  <link rel="stylesheet" href="https://unpkg.com/@univerjs/docs-ui/lib/index.css" />  <style>    html,    body,    #root,    #app {      padding: 0;      margin: 0;      height: 100%;    }  </style></head><body>  <div id="app"></div>  <script>    const { Univer, LocaleType, mergeLocales } = UniverCore    const { FUniver } = UniverCoreFacade    const { UniverRenderEnginePlugin } = UniverEngineRender    const { UniverFormulaEnginePlugin } = UniverEngineFormula    const { UniverUIPlugin } = UniverUi    const { UniverDocsPlugin } = UniverDocs    const { UniverDocsUIPlugin } = UniverDocsUi    const univer = new Univer({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(UniverDesignEnUS, UniverUiEnUS, UniverDocsUiEnUS),      },    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverFormulaEnginePlugin)    univer.registerPlugin(UniverUIPlugin, {      container: 'app',    })    univer.registerPlugin(UniverDocsPlugin)    univer.registerPlugin(UniverDocsUIPlugin)    const univerAPI = FUniver.newAPI(univer)    univerAPI.createDocument({})  </script></body>

버전 지정하기

unpkg와 jsDeliver는 모두 리소스의 특정 버전을 지정할 수 있습니다. 예를 들어 Univer의 x.y.z 버전을 사용하려면 URL에 @<version>을 추가하면 됩니다.

DIFF
- https://unpkg.com/@univerjs/core/lib/umd/index.js+ https://unpkg.com/@univerjs/core@x.y.z/lib/umd/index.js

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.