Importer Web SDK via un CDN
Si vous n’utilisez pas de gestionnaire de paquets, vous pouvez également importer Univer à l’aide de balises <script>.
Convention de nommage des espaces de noms
La version globale d’Univer (UMD) expose un espace de noms dans l’objet global selon la convention de nommage suivante :
@univerjs/core -> UniverCore@univerjs/docs-ui -> UniverDocsUi@univerjs-pro/docs-print -> UniverProDocsPrint@univerjs/docs-ui/locale/en-US -> UniverDocsUiEnUS@univerjs/core/facade -> UniverCoreFacadeMode plugin
Utiliser la version globale
Univer fournit des versions UMD pour les plugins. Avec des balises de script CDN, vous devez inclure manuellement la version UMD de chaque plugin ainsi que celle de ses dépendances. Ce processus étant fastidieux, nous vous recommandons de ne l’utiliser qu’après avoir bien compris le fonctionnement des plugins, notamment leurs dépendances et l’ordre des fichiers de style.
Exemple
<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>Indiquer une version
unpkg et jsDelivr permettent tous deux d’indiquer une version précise d’une ressource. Par exemple, pour utiliser la version x.y.z d’Univer, ajoutez simplement @<version> à l’URL :
- https://unpkg.com/@univerjs/core/lib/umd/index.js+ https://unpkg.com/@univerjs/core@x.y.z/lib/umd/index.jsQue pensez-vous de ce guide ?