如何在客户端（JavaScript、Node环境）使用spin.js？

我来帮你搞定这个问题！你遇到的这两个情况其实都是因为spin.js的不同模块格式导致的，下面给你几个简单可行的方案：

方案1：直接使用UMD版本（最省心） #

你直接从官网下载的spin.js是ES模块格式，浏览器原生不支持裸的export语句，所以会抛出语法错误。spin.js其实提供了适配浏览器的UMD版本，你可以去它的npm包的dist目录里找到spin.umd.js，或者直接用CDN引入这个版本：

<!-- 引入UMD版本的spin.js -->
<script src="https://cdn.jsdelivr.net/npm/spin.js@latest/dist/spin.umd.js"></script>
<script>
  // 现在Spinner已经是全局变量了，直接用就行
  const spinner = new Spinner({
    lines: 12,
    length: 30,
    width: 10,
    radius: 30
  }).spin(document.body);
  
  // 停止旋转的话调用spinner.stop()
  // setTimeout(() => spinner.stop(), 3000);
</script>

UMD版本会自动适配浏览器环境，把Spinner挂载到全局window对象上，不用处理模块导入的问题。

方案2：用ES模块原生导入 #

如果你想继续用下载的ES模块版spin.js，可以把script标签的type设为module，这样浏览器就会支持import/export语法了：

<script type="module">
  // 注意这里的路径要和你的spin.js文件位置对应
  import { Spinner } from './spin.js';
  
  const spinner = new Spinner().spin(document.body);
</script>

这种方式不需要打包工具，现代浏览器都支持，缺点是低版本浏览器（比如IE）不兼容。

方案3：npm安装后配合现代打包工具（适合项目开发） #

如果你的项目是用Vite、Webpack这类现代打包工具搭建的，直接npm安装后用ES模块导入就行，根本不需要browserify：

npm install spin.js

然后在你的JS文件里：

import { Spinner } from 'spin.js';

const spinner = new Spinner().spin(document.body);

打包工具会自动处理模块导入，最终生成浏览器能识别的代码。

为什么你之前的方法不行？ #

• 用require('spin.js')是CommonJS语法，浏览器原生不支持，必须用browserify、Webpack这类工具把CommonJS模块转成浏览器能运行的代码；
• 直接引入ES模块版的spin.js，普通script标签不识别export语句，所以会报错。

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