# Importer Web SDK via un CDN

- Human documentation: [https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation/cdn](https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation/cdn)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation/cdn.md](https://docs.univer.ai/fr-FR/guides/sheets/getting-started/installation/cdn.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [sheets/getting-started/installation/cdn.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/getting-started/installation/cdn.fr-FR.mdx)

---

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 sur l’objet global, selon la convention de nommage suivante :

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

## Mode plugin

### Utiliser la version globale

Univer fournit des versions UMD pour ses plugins. Lorsque vous utilisez des balises de script CDN, vous devez inclure manuellement les versions UMD de chaque plugin ainsi que leurs 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 styles.

#### Exemple

```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>
```

## Spécifier les versions

unpkg et jsDelivr permettent tous deux d’indiquer une version précise de la ressource. Par exemple, pour utiliser la version `x.y.z` d’Univer, ajoutez simplement `@<version>` à l’URL :

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