无法安装npm时，如何通过CDN在React中使用状态管理库

浏览器不支持Node.js的require语法，也无法直接使用ES模块的import（除非配置type="module"且对应CDN资源支持），所以通过CDN引入的库会将API挂载到全局变量上，你需要通过这些全局变量调用库的功能，具体步骤如下：

1. 按顺序引入CDN资源 #

先引入React、ReactDOM，再引入MobX相关库，确保依赖顺序正确：

<!-- React和ReactDOM -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- MobX核心库 -->
<script src="https://cdn.jsdelivr.net/npm/mobx@6/dist/mobx.umd.min.js"></script>
<!-- MobX-React Lite（轻量版，适配函数组件） -->
<script src="https://cdn.jsdelivr.net/npm/mobx-react-lite@3/dist/mobxreactlite.umd.min.js"></script>

引入后，MobX的API挂载到全局mobx对象，MobX-React Lite的API挂载到mobxReactLite对象。

2. 创建可观察状态 #

使用全局mobx对象的observable方法定义状态：

// 定义全局状态存储
const countStore = mobx.observable({
  count: 0,
  // 定义修改状态的方法
  increment() {
    this.count += 1;
  },
  decrement() {
    this.count -= 1;
  }
});

3. 用observer包裹React组件 #

只有被observer包裹的组件，才能响应状态变化：

// 创建响应式组件
const Counter = mobxReactLite.observer(() => {
  // CDN环境下需用React.createElement创建元素（若要用JSX，需额外引入Babel CDN并设置script标签type为text/babel）
  return React.createElement('div', null, [
    React.createElement('h3', null, '计数器'),
    React.createElement('p', null, `当前数值：${countStore.count}`),
    React.createElement('button', { onClick: () => countStore.increment() }, '+1'),
    React.createElement('button', { onClick: () => countStore.decrement() }, '-1')
  ]);
});

4. 渲染组件到DOM #

和普通React CDN用法一致：

const rootDom = document.getElementById('root');
const root = ReactDOM.createRoot(rootDom);
root.render(React.createElement(Counter));

错误原因说明 #

你之前遇到的Uncaught ReferenceError: require is not defined，是因为require是Node.js专属的CommonJS模块语法，浏览器环境中不存在这个函数；而ES模块的import语法需要浏览器支持ES模块，且CDN资源必须提供ES模块版本，同时script标签要设置type="module"。直接使用CDN库暴露的全局变量，是当前环境下最稳妥的方案。

内容的提问来源于stack exchange，提问作者Junky Man