如何在Django项目中使用Node模块？Leaflet插件集成咨询

基础操作：不用额外复杂配置 #

• 到项目根目录（和manage.py同层级）执行npm init，一路回车生成package.json就行，不用纠结配置项。
• 执行npm install [你要的Leaflet插件名]，比如装标记聚类插件就跑npm install leaflet.markercluster。这步只会在本地生成node_modules目录，完全碰不到Django后端代码，绝对不会搞坏现有应用。

静态文件管理：让Django能找到插件资源 #

Django只会从自己的static目录加载静态资源，所以得把插件的编译好的文件（一般在插件的dist目录下）移到Django的static文件夹里：

• 手动复制：找到node_modules/[插件名]/dist下的css、js文件，复制到你的Django app的static子目录，比如static/leaflet-plugins/。
• 自动复制（更省心）：在package.json里加个脚本，比如：

  "scripts": {
    "copy-plugins": "cp -r node_modules/leaflet.markercluster/dist/* static/leaflet-plugins/"
  }
  

  之后每次装新插件，跑npm run copy-plugins就能自动把需要的文件复制过去，避免手动操作出错。

Django模板中引入插件 #

和你之前引入Leaflet核心的方式一致，用{% static %}标签，注意顺序必须先加载Leaflet核心，再加载插件：

<!-- 先加载Leaflet核心文件 -->
<link rel="stylesheet" href="{% static 'leaflet/leaflet.css' %}">
<script src="{% static 'leaflet/leaflet.js' %}"></script>

<!-- 再加载插件的样式和脚本 -->
<link rel="stylesheet" href="{% static 'leaflet-plugins/MarkerCluster.css' %}">
<link rel="stylesheet" href="{% static 'leaflet-plugins/MarkerCluster.Default.css' %}">
<script src="{% static 'leaflet-plugins/leaflet.markercluster.js' %}"></script>

.gitignore配置 #

把node_modules目录排除在Git追踪外，在.gitignore里加一行：

node_modules/

另外，记得把package.json和package-lock.json提交到Git，这样其他人拉代码后，只需要跑npm install就能一键恢复所有插件。

关键提醒 #

• 千万别直接在模板里引用node_modules里的文件，Django的静态文件查找机制不包含这个目录，而且生产环境部署时也不该把node_modules传到服务器上。
• 大部分Leaflet插件都提供了编译好的dist文件，不需要额外配置Webpack之类的打包工具，只有少数需要编译的插件才用得上，遇到再说就行。

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