如何在webpacker rails中使用ProvidePlugin？

Question

我目前尝试使用webpack.ProvidePlugin，但似乎加载不正确。这是我的environment.js文件。

var webpack = require("webpack");

const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");

environment.loaders.append("vue", vueLoader);

environment.plugins.append(
  "Provide", // arbitrary name
  new webpack.ProvidePlugin({
    Vue: "vue",
    _: "lodash"
  })
);

module.exports = environment;

还有我的文件Header.vue

<h1>{{_.capitalize(title)}} </h1>

错误：

vue.runtime.esm.js:587 [Vue warn]: Property or method "_" is not defined on
 the instance but referenced during render. Make sure that this property is 
reactive, either in the data option, or for class-based components, by 
initializing the property. 

- user2167582

---

离题：无需添加vue loader。它默认存在。看着我的代码，唯一的区别是你的第一个参数是'Provide'，而我是'ProvidePlugin'。不知道这是否有所不同。其次，为什么不在vue文件中导入lodash方法？也许问题在于编译vue文件时，webpack无法看到全局上下文。此外，按照Vue的通用做法，您应该在计算函数中进行大写处理。 - Kkulikovskis

使用ProvidePlugin的整个目的是为了全局提供这些值，我对导入没有问题，只是有点不方便，某些常用模块不应该遍布整个存储库。 - user2167582

不，我的意思是只导入你使用的那些函数。然后，当Babel实现了良好的摇树算法来导入函数时，你就不必重写任何东西了。但这只是一个建议。 - Kkulikovskis

@Kkulikovskis，我正在做其他事情，只是不是像lodash这样的东西。 - user2167582

Answer 1

你可以在Vue中使用vue-lodash插件，它提供了在Vue模板中使用lodash的功能，让你的代码更加高效。

安装它（npm i vue-lodash）并配置Vue来使用它：

import Vue from 'vue'
import VueLodash from 'vue-lodash'

Vue.use(VueLodash, options)

你可以像在Header.vue中一样，在Vue模板中使用lodash :)

- Michał Zalewski

---

谢谢，但我不认为那回答了我的问题，为什么提供者不起作用。 - user2167582

Answer 2

这与webpacker、webpack或ProvidePlugin无关。 您可以通过从组件中访问_（即在created钩子中）轻松检查此内容。

当您尝试从模板引用该方法时，问题就开始了：

模板表达式是沙盒化的，并且只能访问白名单中的全局变量，例如Math和Date。您不应尝试在模板表达式中访问用户定义的全局变量。

为了使访问变得可能，您可以将_添加到您的数据中：

  data: function () {
    return {
      _
    }
  },

然而，在Vue中不建议使用_或$作为前缀或名称，因为框架本身保留了许多这些名称（源）：

以_或$开头的属性将不会在Vue实例上代理，因为它们可能与Vue的内部属性和API方法冲突。您必须将它们作为vm.$data._property访问。

链接1 链接2

因此，您可以只使用“lodash”而不是“_”。

environment.plugins.append(
  "Provide", // arbitrary name
  new webpack.ProvidePlugin({
    Vue: "vue",
    lodash: "lodash"
  })
)

...

  data: function () {
    return {
      lodash
    }
  },

---

在实际应用中，访问全局变量 _ 的方式有以下几种：

• 将 lodash 添加到 Vue 原型中：

或者

Vue.prototype._ = _

或者

Object.defineProperty(Vue.prototype, '_', { value: _ })    

来源

• 像之前建议的那样将其添加为插件

来源

- WoH

---

我认为你在离题讨论一个我甚至不知道存在的问题。但是我认为我遇到的问题是当前版本的webpacker所特有的问题。我可能错了，但我的直觉是许多其他人也使用着最新和最好的webpacker，并且遇到过类似的问题。 - user2167582

我承认，我不只是想“修复你的问题”，我只是不想给你一个解决方案，让你从一个问题跑到另一个问题。如果您可以尝试从脚本中访问lodash，而不是如我在第1行中建议的模板，那么这将非常有帮助，以确保插件或设置没有任何实际问题。由于'_'在您的Vue实例上未定义，因此无论您如何设置Vue实例，都会出现此错误。（不管是Webpacker还是插件） - WoH

谢谢您的建议，但正如问题所述，我的问题更具体地涉及ProvidePlugin的使用，而不是添加lodash。 - user2167582