使用NPM为Phoenix 1.3添加jQuery遇阻：配置后无法自动加载求排查

我之前在Phoenix 1.3搭配Brunch的环境里也踩过类似的jQuery加载坑，结合你的配置细节，咱们一步步定位问题：

1. 先修正Brunch配置的语法错误 #

你的assets/brunch-config.js里的npm配置存在嵌套错误——你重复写了一层npm键，这会导致Brunch无法正确识别全局变量配置。

错误配置：

npm: { enabled: true, npm: { globals: { $: 'jquery', jQuery: 'jquery' } } }

正确配置：

npm: {
  enabled: true,
  globals: {
    $: 'jquery',
    jQuery: 'jquery'
  }
}

这个错误是最常见的原因，Brunch会忽略嵌套错误的配置项，自然不会自动把jQuery挂载到全局$和jQuery上。

2. 确保NPM依赖正确安装 #

有时候依赖缓存或者安装不完整也会导致加载失败，建议执行以下步骤清理重装：

cd assets
rm -rf node_modules package-lock.json
npm install

这一步能排除依赖版本冲突或者缓存损坏的问题。

3. 验证导入与全局暴露的逻辑 #

你已经在assets/js/app.js里写了import $ from 'jquery';，如果同时配置了Brunch的globals，其实两种方式都可以生效，但要注意：

• 如果用手动import，确保你的业务JS文件是在app.js之后被加载的（比如在app.js里import业务文件，或者在Brunch的files配置里确保顺序正确）
• 如果依赖Brunch的globals自动暴露，其实可以去掉手动import，Brunch会自动把jQuery注入到全局作用域

4. 检查Brunch的编译输出 #

运行cd assets && brunch build，然后打开priv/static/js/app.js，搜索jQuery或者$关键字：

• 如果能找到相关代码，说明Brunch已经把jQuery打包进去了，问题可能出在全局变量挂载或者代码执行顺序上
• 如果找不到，说明Brunch没识别到jQuery依赖，再回头检查配置和依赖安装情况

5. 查看Brunch的详细日志 #

如果以上步骤都没解决问题，运行cd assets && brunch watch --verbose，查看实时编译日志，里面会显示哪些文件被加载、有没有报错信息，比如是否找不到jQuery模块，或者配置解析错误。

测试修复效果 #

修正配置并重装依赖后，重启Phoenix服务（mix phx.server），然后在app.js里直接写测试代码：

// assets/js/app.js
$(function () {
  alert('Hello');
});

打开浏览器访问你的应用，如果弹出提示，说明问题解决了。

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