如何在Jupyter Lab React扩展中配置.env文件？

常规React项目（比如create-react-app）会自动加载根目录.env文件并注入process.env，但Jupyter Lab扩展的构建系统基于自定义webpack配置，不会自动处理这件事，所以得手动配置：

1. 安装依赖 #

先安装dotenv和dotenv-webpack来处理环境变量：

jlpm install dotenv dotenv-webpack --save-dev

2. 配置webpack #

在扩展根目录创建或修改webpack.config.js，添加Dotenv插件：

const Dotenv = require('dotenv-webpack');
const path = require('path');

module.exports = {
  // 保留原有扩展配置
  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, '.env'),
      systemvars: true
    })
  ]
};

3. 规范.env变量命名 #

建议给变量加专属前缀（比如JUPYTER_EXT_）避免冲突，示例.env内容：

JUPYTER_EXT_API_KEY=你的私钥内容

4. 更新构建脚本 #

如果扩展是用官方模板生成的，修改package.json里的build命令，指定使用自定义webpack配置：

{
  "scripts": {
    "build": "webpack --config webpack.config.js",
    // 其他脚本保持不变
  }
}

5. 重新构建启动 #

执行以下命令重新构建扩展和Jupyter Lab：

jlpm run build
jupyter lab build
jupyter lab

替代方案：手动注入变量 #

如果不想用dotenv-webpack，可以直接用webpack的DefinePlugin手动注入：

const webpack = require('webpack');
const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_KEY': JSON.stringify(process.env.API_KEY)
    })
  ]
};

注意：务必把.env加入.gitignore，不要提交包含私钥的文件到版本控制。

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