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/network/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/sheets/lib/umd/index.js"></script> <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/index.js"></script> <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/index.js"></script> <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/index.js"></script> <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/index.js"></script> <script src="https://unpkg.com/@univerjs/sheets-numfmt-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/sheets/lib/umd/facade.js"></script> <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/facade.js"></script> <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/facade.js"></script> <script src="https://unpkg.com/@univerjs/sheets-numfmt/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/sheets/lib/umd/locale/en-US.js"></script> <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/locale/en-US.js"></script> <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/en-US.js"></script> <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/locale/en-US.js"></script> <script src="https://unpkg.com/@univerjs/sheets-numfmt-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" /> <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-ui/lib/index.css" /> <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-formula-ui/lib/index.css" /> <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-numfmt-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, UniverInstanceType } = UniverCore const { FUniver } = UniverCoreFacade const { UniverRenderEnginePlugin } = UniverEngineRender const { UniverFormulaEnginePlugin } = UniverEngineFormula const { UniverUIPlugin } = UniverUi const { UniverSheetsPlugin } = UniverSheets const { UniverSheetsUIPlugin } = UniverSheetsUi const { UniverDocsPlugin } = UniverDocs const { UniverDocsUIPlugin } = UniverDocsUi const { UniverSheetsFormulaPlugin } = UniverSheetsFormula const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverDesignEnUS, UniverUiEnUS, UniverSheetsEnUS, UniverSheetsUiEnUS, UniverDocsUiEnUS, UniverSheetsFormulaUiEnUS, UniverSheetsNumfmtUiEnUS, ), }, }) univer.registerPlugin(UniverRenderEnginePlugin) univer.registerPlugin(UniverFormulaEnginePlugin) univer.registerPlugin(UniverUIPlugin, { container: 'app', }) univer.registerPlugin(UniverDocsPlugin) univer.registerPlugin(UniverDocsUIPlugin) univer.registerPlugin(UniverSheetsPlugin) univer.registerPlugin(UniverSheetsUIPlugin) univer.registerPlugin(UniverSheetsFormulaPlugin) univer.registerPlugin(UniverSheetsFormulaUIPlugin) univer.registerPlugin(UniverSheetsNumfmtPlugin) univer.registerPlugin(UniverSheetsNumfmtUIPlugin) univer.createUnit(UniverInstanceType.UNIVER_SHEET, {}) const univerAPI = FUniver.newAPI(univer) </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이 가이드는 어떠셨나요?