Django模板报Uncaught ReferenceError: require is not defined错误解决及require使用方法

该问题属于JavaScript层面问题，和Django框架无关。
Django模板的作用仅为渲染输出静态文本内容到客户端，不会修改或拦截你编写的JS代码的执行逻辑。require是Node.js环境下专属的CommonJS模块化导入语法，浏览器端原生JS运行环境没有内置该方法，所以会触发未定义报错。

如果你不需要使用Node.js专属模块，只需修改JS代码适配浏览器环境即可：

• 移除所有require相关语法，替换为浏览器原生支持的ES6 import语法，或直接通过<script>标签引入对应依赖的CDN/本地静态资源

示例：原来的代码为const lodash = require('lodash')，可直接在模板中添加<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>，后续即可全局调用_对象使用lodash能力。

如果确实需要在Django模板的JS代码中使用require，可通过以下两种方式实现：

方案1：使用Browserify预打包 #

Browserify可以将使用CommonJS规范的JS代码打包为浏览器可直接运行的产物，步骤如下：

1. 本地安装Browserify：npm install -g browserify
2. 打包你的源码文件：browserify 你的源码文件路径 -o 打包后产物路径
3. 将打包后的产物放到Django的STATICFILES_DIRS配置的静态资源目录中，在模板中通过静态资源标签引入即可：

<script src="{% static '打包后的文件相对路径' %}"></script>

方案2：引入require.js兼容库 #

require.js是专门为浏览器端提供模块化加载能力的开源库，接入后即可直接使用require语法：

1. 将require.js放入Django静态资源目录，在模板中引入并配置入口文件：

<script data-main="{% static 'js/你的业务入口文件.js' %}" src="{% static 'js/require.js' %}"></script>

2. 在业务入口文件中按照AMD规范编写require调用代码即可，示例：

require(['lodash', 'axios'], function(_, axios) {
  // 此处可正常使用导入的lodash和axios模块
})

内容的提问来源于stack exchange，提问作者elissar ahmad abdeen