从 CDN 加载 mobx-react 作为 UMD 时出错

Question

自版本 6.0.0 起，从 CDN 将 mobx-react 作为 UMD 加载会导致错误。有解决办法吗？

例子

const { observer } = mobxReact;

const App = observer(() => <div>Example</div>);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx@6.0.4/dist/mobx.umd.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx-react@7.0.5/dist/mobxreact.umd.production.min.js"></script>

<div id="root"></div>

Answer 1

由于版本 6.0.0，mobx-react 依赖于 mobx-react-lite 包，它在使用 observer 时用在函数组件上。

如果您只在应用程序中使用功能组件，您可以根据需要直接使用 mobx-react-lite，这样速度稍快，体积更小（压缩后仅为 1.5kB）。

例子

const { observer } = mobxReact;

const App = observer(() => <div>Example</div>);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx@6.0.4/dist/mobx.umd.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx-react-lite@3.1.6/dist/mobxreactlite.umd.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobx-react@7.0.5/dist/mobxreact.umd.production.min.js"></script>

<div id="root"></div>

从 CDN 加载 mobx-react 作为 UMD 时出错

Error when loading mobx-react as UMD from a CDN

javascript

mobx

mobx-react