如何在Django应用内使用NPM模块并集成Notion API

方案说明 #

本方案无需复杂Webpack配置，采用轻量的Vite作为打包工具，学习成本极低，适配仅调用NPM模块、无前端框架的使用需求，同时原生支持Typescript。

实现步骤 #

1. 初始化NPM环境

• 进入Django项目根目录（与manage.py同级路径），执行命令：npm init -y，执行完成后会自动生成package.json文件，用于管理NPM依赖。

2. 安装所需依赖

• 安装Vite打包工具作为开发依赖：npm install -D vite
• 安装Notion官方API SDK：npm install @notionhq/client

3. 编写Vite配置
   在项目根目录新建vite.config.js文件，写入以下内容，注意将示例中的your_app_name替换为你要使用该功能的Django应用名称：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      // 入口文件路径
      input: './src/main.ts'
    },
    // 打包产物输出到目标Django应用的静态文件夹下
    outDir: './your_app_name/static/dist',
    // 打包前自动清除上一次的旧产物
    emptyOutDir: true
  },
  // 静态资源路径前缀，和Django默认的STATIC_URL保持一致即可
  base: '/static/dist/'
})

4. 编写业务代码
   在项目根目录新建src文件夹，在文件夹内新建main.ts文件，写入你的Notion API调用逻辑，示例参考：

import { Client } from "@notionhq/client"

// 初始化Notion客户端
const notion = new Client({ auth: "你的Notion API密钥" })

// 编写你的业务逻辑，示例为获取数据库内容
async function getNotionDatabase() {
  const response = await notion.databases.query({
    database_id: "你的数据库ID"
  })
  console.log(response.results)
}

getNotionDatabase()

5. 配置打包命令
   打开package.json文件，修改scripts字段为以下内容：

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

• 开发阶段执行npm run dev，Vite会监听文件变化，每次修改代码后自动重新打包产物到静态文件夹
• 上线前执行npm run build，会生成压缩后的生产环境可用的JS文件

6. Django模板引入
   在你需要使用该功能的HTML模板中，先加载静态文件标签，再引入打包后的JS文件即可：

{% load static %}
<!-- 其他模板内容 -->
<script src="{% static 'dist/main.js' %}"></script>

可选：Typescript基础配置 #

如果你使用Typescript开发，在项目根目录新建tsconfig.json文件，写入最简配置即可正常使用类型提示：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

注意事项 #

不要将Notion API密钥直接写在前端代码中上线，前端代码对所有用户可见，会导致密钥泄露。如果是生产环境使用，建议加一层Django后端代理，前端调用你自己写的Django接口，由后端服务调用Notion API再返回结果。

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