創用 CC 4.0 授權條款

本節內容衍生自以下連結的內容，並受 CC BY 4.0 授權條款約束。
https://webpack.dev.org.tw/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 作為自由變數時，會自動載入 module，並用已載入的 module 的 exports (或 property，以支援具名 exports) 來填入 identifier。

若要匯入 ES2015 模組的預設 export，您必須指定模組的 default 屬性。

選項

在瀏覽器環境中啟用 process 物件支援。

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

這段程式碼

console.log(process.version);

會在幕後轉換為

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

為了自動載入 jquery，我們可以將它公開的兩個變數指向對應的 node 模組

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

然後在我們的任何原始碼中

// in a module
$('#item'); // <= works
jQuery('#item'); // <= also works
// $ is automatically set to the exports of module "jquery"

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

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

本頁內容