npm 包 provide-always-loader 使用教程

提供一个途径，通过在 require 某个模块时变量提供输入为提供值，可以始终为 webpack 模块使用相同的值。

什么是 provide-always-loader

provide-always-loader 是一个 webpack loader，它可以让你使用固定值来模拟 node 模块。它允许你始终使用相同的模块并返回相同的值。

这是一个非常简单的 loader，并且可以在多种情况下使用。它还可以在打包之前对所有依赖项进行正确的配置。

使用

1. 首先，安装 provide-always-loader：

npm install provide-always-loader --save-dev

1. 在 webpack 配置中使用 provide-always-loader：

{
  test: /module-to-be-provided\.js$/,
  loader: 'provide-always-loader',
  options: {
    varName: 'SOME_PROVIDED_VALUE'
  }
}

1. 现在，在您的其他模块中，您可以像这样引用它：

module.exports = require('module-to-be-provided');

如果您的 loader 配置为 varName: 'value'，则在每个 require 语句处始终返回一个名为 value 的值。

使用时，可以先编写一个模块 module-to-be-provided.js，这个模块中定义想要提供给其他模块使用的变量或函数：

module.exports = {prop1: 'value1', prop2: 'value2', func1: () => {console.log("I am func1.")}}

在使用到这个变量或函数的其他模块中引用这个模块：

const m = require('module-to-be-provided');
console.log(m.prop1);
m.func1();

使用 provide-always-loader 的作用是每次 require 这个模块时始终返回相同的值（是同一个对象的引用），这个值可以是任何值，如字符串、数字、对象甚至是函数。

1. 下面是一个更完整的 loader 配置示例：

{
  test: /\.js$/,
  loader: 'provide-always-loader',
  options: {
    varName: 'providedValue',
    path: './src/provided.js'
  }
}

在上述示例中，provide-always-loader 会解析 './src/provided.js' 并把该模块导出的值存储到 providedValue 变量中。在之后的代码中只需 require('providedValue') 就可以获得这个值了。

在 webpack 配置中使用 provide-always-loader 可以大大简化代码中的模块引用和模块处理流程。它可用于多个场景，如跨模块之间共享变量、配置文件、常用函数等。现在您可以尝试在自己的项目中使用它来优化您的前端工作流程啦！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb881e8991b448da3f6