如何在Node.js的EJS中定义jQuery？解决$未定义报错

嘿，我来帮你搞定这个ReferenceError: $ is not defined的问题！你现在的误区是把Node.js后端环境和浏览器前端环境的jQuery使用搞混啦——后端里require('jquery')拿到的是给Node用的jQuery版本，和浏览器里需要的前端$对象完全不是一回事，所以后端引入根本解决不了前端的报错。

下面是正确的操作步骤，帮你在EJS里顺利用上Bootstrap行内编辑器：

1. 删掉后端路由里的jQuery和jsdom代码 #

别再在index.js里写var $ = require('jquery')或者jsdom相关的代码啦，这些都是用来在Node环境模拟DOM的，对你的前端编辑器场景完全没用，反而徒增复杂度，直接删掉就行。

2. 在EJS模板里正确引入前端资源 #

bootstrap-editable依赖jQuery，所以必须先引入jQuery，再引入bootstrap-editable，顺序绝对不能乱。你可以用CDN或者本地静态文件：

方式一：用CDN引入（最简单）

在你的EJS模板的<body>末尾（推荐末尾加载提升页面性能）添加这些资源：

<!-- 先引入jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 如果用到Bootstrap其他组件，引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 最后引入bootstrap-editable的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap3-editable@1.5.1/js/bootstrap-editable.min.js"></script>
<!-- 别忘了引入bootstrap-editable的CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap3-editable@1.5.1/css/bootstrap-editable.css" rel="stylesheet">

方式二：用本地静态文件

如果你想用本地资源，先在Express里配置静态文件目录：

// 在你的app.js或者index.js里添加
const express = require('express');
const app = express();
// 把public文件夹设为静态资源目录
app.use(express.static('public'));

然后把jquery.min.js、bootstrap-editable.min.js和对应的CSS文件放到项目根目录的public文件夹里，再在EJS里引入：

<link href="/bootstrap-editable.css" rel="stylesheet">
<script src="/jquery.min.js"></script>
<script src="/bootstrap-editable.min.js"></script>

3. 在EJS里初始化bootstrap-editable #

现在你可以在EJS的<script>标签里正常使用$了，比如：

<script>
$(document).ready(function() {
  // 初始化行内编辑器，比如给id为username的元素添加编辑功能
  $('#username').editable({
    type: 'text',
    title: '修改用户名',
    url: '/save-username' // 提交修改的后端接口
  });
});
</script>

关键提醒 #

一定要保证jQuery在bootstrap-editable之前加载，因为bootstrap-editable的代码会直接使用$对象，如果jQuery还没加载，就会抛出你遇到的那个错误。

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