单刀直入！Ant Design Mobile webpack externals CDN引入报错mobile is not defined妙招

今天下午发布遇到的问题，差了半天没看懂这个mobile错误是啥，后来绕了一圈发现是antd的问题。

如上面，我们webpack配置的时候，cdn引入后，window下面的变量叫做antd-mobile，而不是mobile。

解决方法很简单，在externals增加下面配置即可：

externals: {
   antd: "antd-mobile",
}

另一个值得一提的是，如果想使用antd-mobile来做项目，我建议你最好使用yarn的方式来引入对应的依赖，免去npm install失败的烦恼。

下面我们看一下使用antd-mobile创建项目的方式：

1、yarn create react-app my-app

2、cd my-app

3、yarn add antd-mobile

4、安装完成后，在App.js中引入antd-mobile：

import 'antd-mobile/dist/antd-mobile.css';

5、在App.js中使用antd-mobile：

import { Button } from 'antd-mobile';

function App() {
  return (
    <div>
      <Button type="primary">Hello world!</Button>
    </div>
  );
}

export default App;

6、启动项目：

yarn start

访问 http://localhost:3000 即可看到项目运行的效果。

现在，我们就可以愉快的使用antd-mobile进行开发了。

关于 webpack externals

Webpack externals是一个非常强大的功能，它允许你在构建代码时排除一些库或模块。这对于一些大型的库或模块来说是非常有用的，因为它们可能会增加你的包大小并减慢你的构建速度。

Webpack externals的工作原理是将你排除的库或模块作为全局变量暴露给你的代码。这意味着你可以在你的代码中使用这些库或模块，而无需将它们包含在你的包中。

结论

以上就是关于如何解决webpack externals CDN引入Ant Design Mobile时mobile is not defined报错的方法。希望这篇文章对你有帮助。

如果你在使用webpack externals时遇到任何问题，欢迎在评论区留言，我会尽力为你解答。