如何仅在开发环境为React应用引入Twitter Bootstrap库？

根据你使用的React构建工具，这里提供几种最实用的实现方式：

一、Create React App（CRA）项目 #

CRA会自动管理NODE_ENV环境变量，开发时为development，生产打包时自动切换为production。

1. 在项目入口文件（一般是src/index.js）里添加环境判断，仅在开发时引入Bootstrap：

// src/index.js
// 仅开发环境加载Bootstrap样式和JS
if (process.env.NODE_ENV === 'development') {
  import 'bootstrap/dist/css/bootstrap.min.css';
  // 如果用到Bootstrap的交互组件（比如模态框、下拉菜单），再引入JS包
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
}

// 下面是原本的App渲染代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 把Bootstrap安装为开发依赖，避免它出现在生产依赖列表里：

npm install bootstrap --save-dev
# 用yarn的话：yarn add bootstrap --dev

二、Vite项目 #

Vite用import.meta.env.MODE来区分环境，开发环境值为development。

1. 在入口文件（比如src/main.jsx）里加入判断逻辑：

// src/main.jsx
if (import.meta.env.MODE === 'development') {
  import 'bootstrap/dist/css/bootstrap.min.css';
  // 需要交互组件的话加这行
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
}

// 正常渲染App
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 同样安装为开发依赖：

npm install bootstrap --save-dev

三、自定义Webpack配置的项目 #

如果是自己搭的Webpack项目，先确保Webpack配置里注入了环境变量：

1. 修改Webpack配置文件，添加DefinePlugin注入NODE_ENV：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // 根据命令自动设置mode，npm run dev时为development，build时为production
  mode: process.env.NODE_ENV || 'development',
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

2. 入口文件里的判断逻辑和CRA一致：

if (process.env.NODE_ENV === 'development') {
  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
}

3. 安装Bootstrap为开发依赖：

npm install bootstrap --save-dev

关键注意点 #

• 别在public/index.html里用<link>引入Bootstrap，不然生产环境也会加载，违背需求。
• 组件里写的Bootstrap类名（比如btn btn-success），开发环境靠自己引入的样式生效，生产环境则由父网站的Bootstrap样式接管，两边效果一致。
• 如果只需要Bootstrap的部分样式，可以按需引入，但开发环境全量引入更省心，反正不会被打包进生产产物。

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