简体中文

CC 4.0 协议声明

本节内容派生于以下链接指向的内容，并遵守 CC BY 4.0 许可证的规定。
https://webpack.js.org/plugins/provide-plugin/
以下内容如果没有特殊声明，可以认为都是基于原内容的修改和删减后的结果。

ProvidePlugin

自动加载模块，而不必在每处都 import 或 require 它们。

new rspack.ProvidePlugin({
  identifier: 'module1',
  // ...
});

或

new rspack.ProvidePlugin({
  identifier: ['module1', 'property1'],
  // ...
});

默认情况下，模块解析路径为当前文件夹（./**）和 node_modules。

也可以指定完整路径：

const path = require('path');

new rspack.ProvidePlugin({
  identifier: path.resolve(path.join(__dirname, 'src/module1')),
  // ...
});

每当在模块中遇到 identifier 作为自由变量时，相应的模块会自动加载，且 identifier 会被填充为已加载模块的输出（或者是属性，以支持具名导出）。

为了导入一个 ES2015 模块的默认导出，你必须指定模块的 default 属性。

选项

在浏览器环境中启用 process 对象的支持。

new rspack.ProvidePlugin({
  process: [require.resolve('process/browser')],
});

以下代码片段：

console.log(process.version);

将被转换为：

import process from 'process/browser';
console.log(process.version);

要自动加载 jquery，我们可以把它暴露的两个变量都对应到相应的模块：

new rspack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});

然后在我们的任何源代码中：

// 在一个模块中
$('#item'); // <= 可以工作
jQuery('#item'); // <= 也可以工作
// $ 被自动设置为模块 "jquery" 的导出

new rspack.ProvidePlugin({
  _map: ['lodash', 'map'],
});

new rspack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default'],
});

ON THIS PAGE