如何在Webpack或Rollup项目中正确定义外部全局变量？

Rollup 配置方法 #

方法1：结合 external 和 globals 字段（推荐） #

Rollup的globals字段需要配合external一起使用，用来告知Rollup这些变量属于外部全局依赖，无需打包进最终产物，运行时直接从全局环境读取。

在rollup.config.js中添加如下配置：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // 可根据需求选择umd、es等格式
    globals: {
      dle_root: 'window.dle_root',
      dle_admin: 'window.dle_admin',
      dle_login_hash: 'window.dle_login_hash',
      dle_group: 'window.dle_group',
      dle_skin: 'window.dle_skin',
      dle_wysiwyg: 'window.dle_wysiwyg',
      quick_wysiwyg: 'window.quick_wysiwyg',
      dle_min_search: 'window.dle_min_search'
    }
  },
  external: [
    'dle_root',
    'dle_admin',
    'dle_login_hash',
    'dle_group',
    'dle_skin',
    'dle_wysiwyg',
    'quick_wysiwyg',
    'dle_min_search'
  ]
};

模块代码中可直接导入使用：

import { dle_root, dle_skin } from 'dle_root';

console.log(`当前皮肤：${dle_skin}`);

方法2：使用 @rollup/plugin-inject 自动注入 #

如果不想手动导入变量，可通过该插件将全局变量直接注入模块作用域：

1. 安装插件：

npm install @rollup/plugin-inject --save-dev

2. 配置插件：

import inject from '@rollup/plugin-inject';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    inject({
      dle_root: ['window', 'dle_root'],
      dle_admin: ['window', 'dle_admin'],
      // 其余变量按相同格式配置
    })
  ]
};

模块代码中无需导入，直接使用变量名：

console.log(`站点根路径：${dle_root}`);

Webpack 配置方法 #

方法1：使用 externals 配置 #

Webpack的externals字段用于指定外部依赖，运行时从全局环境获取对应变量：

在webpack.config.js中添加：

module.exports = {
  // 其他基础配置...
  externals: {
    dle_root: 'window.dle_root',
    dle_admin: 'window.dle_admin',
    dle_login_hash: 'window.dle_login_hash',
    dle_group: 'window.dle_group',
    dle_skin: 'window.dle_skin',
    dle_wysiwyg: 'window.dle_wysiwyg',
    quick_wysiwyg: 'window.quick_wysiwyg',
    dle_min_search: 'window.dle_min_search'
  }
};

模块代码中通过导入使用：

import dleRoot from 'dle_root';

console.log(dleRoot);

方法2：使用 ProvidePlugin 自动注入 #

若希望无需导入直接使用变量，可借助Webpack内置的ProvidePlugin：

const webpack = require('webpack');

module.exports = {
  // 其他基础配置...
  plugins: [
    new webpack.ProvidePlugin({
      dle_root: ['window', 'dle_root'],
      dle_admin: ['window', 'dle_admin'],
      // 其余变量按相同格式配置
    })
  ]
};

模块代码中直接使用变量名：

console.log(`用户组ID：${dle_group}`);

额外注意事项 #

• 确保你的模块脚本在CMS的全局变量脚本之后加载，避免出现变量未定义的错误。
• 若使用TypeScript，需为这些全局变量添加类型声明以避免类型报错：

declare var dle_root: string;
declare var dle_admin: string;
// 其余变量的类型声明按需添加

内容的提问来源于stack exchange，提问作者Aimon Z.