Vite 使用 vite-plugin-cdn-import 和 vite-plugin-html 使用 CDN 配置 React 的打包项目

使用vite-plugin-cdn-import和vite-plugin-html插件可以在Vite项目中配置CDN引入React。

首先，安装vite-plugin-cdn-import和vite-plugin-html插件：

npm install vite-plugin-cdn-import vite-plugin-html --save-dev

然后，在vite.config.js文件中配置vite-plugin-cdn-import插件：

import { defineConfig } from 'vite'
import cdnImport from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    cdnImport({
      modules: [
        {
          name: 'react',
          var: 'React',
          path: 'umd/react.production.min.js',
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: 'umd/react-dom.production.min.js',
        },
      ],
    }),
  ],
})

接下来，在vite.config.js文件中配置vite-plugin-html插件：

import { defineConfig } from 'vite'
import html from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    html({
      inject: {
        injectData: {
          cdn: [
            'https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js',
            'https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js',
          ],
        },
      },
    }),
  ],
})

最后，使用React的组件：

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)