如何在Django模板中使用npm JavaScript模块waveform-playlist？解决import语句报错问题

你遇到的Cannot use import statement outside a module报错，本质是浏览器默认不会把普通<script>标签当作ES模块处理，而import是ES模块特有的语法。下面给你几种实用的解决方案，从快速验证到生产环境最佳实践都有：

一、快速验证：给script标签加上模块标记 #

这是最直接的测试方法，只需要修改你的script标签：

1. 先确认已经在项目根目录执行了安装命令：

   npm install waveform-playlist --save
   

2. 把node_modules/waveform-playlist/dist里的编译好的JS文件（比如waveform-playlist.min.js）复制到Django的静态文件目录，比如static/js/waveform/。
3. 在模板里这样写：

   <script type="module">
     // 用Django的静态标签生成正确路径
     import WaveformPlaylist from "{% static 'js/waveform/waveform-playlist.min.js' %}";
     
     // 这里写你的初始化逻辑，比如官方示例的用法：
     const playlist = WaveformPlaylist.init({
       container: document.getElementById("playlist"),
       waveHeight: 50,
       samplesPerPixel: 1000,
       timescale: true,
       controls: true,
       state: "cursor",
       colors: {
         waveOutlineColor: "#E0EFF1",
         timeColor: "grey",
         fadeColor: "black"
       }
     });
   </script>
   

   加上type="module"后，浏览器就会用ES模块规则解析这个脚本，import就能正常工作了。不过这种方式不推荐直接在生产环境用node_modules里的文件，最好复制编译后的版本到静态目录。

二、生产环境推荐：用打包工具构建 #

如果你的项目需要用到多个npm模块，或者要优化代码体积，用打包工具（比如Vite、Webpack）是更好的选择，步骤如下：

1. 在项目根目录初始化npm（如果还没做）：

   npm init -y
   

2. 安装Vite（比Webpack更轻量化，适合快速搭建）：

   npm install vite --save-dev
   

3. 创建一个入口JS文件，比如src/app.js，在里面导入模块并挂载到全局（方便模板里调用）：

   import WaveformPlaylist from "waveform-playlist";
   
   // 把模块挂到window对象上，这样模板里的普通脚本也能访问
   window.WaveformPlaylist = WaveformPlaylist;
   

4. 配置Vite的打包输出路径，创建vite.config.js：

   export default {
     build: {
       // 输出到Django的静态文件目录，根据你的项目结构调整
       outDir: "../static/js/build",
       emptyOutDir: true,
       // 生成单个文件，方便引入
       rollupOptions: {
         output: {
           entryFileNames: '[name].js',
         },
       },
     },
   };
   

5. 执行打包命令：

   npm run build
   

6. 在Django模板里引入打包好的文件：

   <script src="{% static 'js/build/app.js' %}"></script>
   <script>
     // 现在可以直接用全局的WaveformPlaylist了
     const playlist = WaveformPlaylist.init({
       // 你的配置项
     });
   </script>
   

   这种方式会把所有依赖打包成一个文件，避免了路径问题，还能压缩代码，提升加载速度。

三、偷懒选项：用CDN直接引入 #

如果只是快速测试功能，不想折腾本地安装和打包，可以用CDN提供的ES模块版本：

<script type="module">
  import WaveformPlaylist from "https://cdn.skypack.dev/waveform-playlist";
  
  // 初始化代码
  const playlist = WaveformPlaylist.init({
    // 配置
  });
</script>

不过这种方式依赖第三方CDN，生产环境要考虑稳定性，最好还是用本地打包的方式。

最后别忘了，Django的静态文件配置要正确，开发环境确保DEBUG=True时静态文件服务正常，生产环境要运行python manage.py collectstatic把静态文件收集到指定目录。

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