解决Locomotive Scroll中import语句模块外使用的SyntaxError报错

报错原因分析 #

你遇到的问题核心在于：

• 浏览器默认将JS文件视为普通脚本，而非ES模块，直接使用import语句会触发语法错误；
• 你同时混用了npm本地安装的模块导入方式和CDN全局引入方式，两者冲突导致问题无法解决。

下面是三种有效的解决方案，按需选择：

方案1：改用CDN ES模块导入（无需本地npm安装） #

这种方式不需要依赖本地npm包，直接通过浏览器ES模块加载CDN资源：

1. 修改HTML：移除页面中引入的全局CDN脚本，只保留带type="module"的本地JS脚本

   <!-- 移除这一行：<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> -->
   <script src="./app.js" type="module"></script>
   

2. 修改app.js：将导入路径替换为Locomotive Scroll的ES模块CDN地址

   import LocomotiveScroll from 'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.esm.min.js';
   
   const scroll = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]'),
       smooth: true,
       multiplier: .2
   });
   

方案2：使用全局变量方式（最简单快速） #

既然你已经引入了CDN的全局版本，可以直接使用全局暴露的LocomotiveScroll变量，无需模块导入：

1. 调整HTML脚本顺序：确保CDN脚本在本地JS之前加载，保证全局变量先被初始化

   <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
   <script src="./app.js"></script> <!-- 去掉type="module"，因为不需要模块特性 -->
   

2. 修改app.js：删除import语句，直接使用全局变量

   const scroll = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]'),
       smooth: true,
       multiplier: .2
   });
   

方案3：使用打包工具（生产环境推荐） #

如果依赖本地npm包开发，需要用打包工具（如Vite、Webpack）解析模块导入：

1. 初始化项目（若未初始化）：

   npm init -y
   

2. 安装Vite作为开发打包工具：

   npm install -D vite
   

3. 修改package.json的scripts字段：

   "scripts": {
     "dev": "vite",
     "build": "vite build"
   }
   

4. 启动开发服务器：

   npm run dev
   

   此时你的原始app.js代码（使用import LocomotiveScroll from 'locomotive-scroll'）就能正常工作，Vite会自动解析npm模块路径并处理模块导入。

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