如何在WebPacker Rails中使用SupplyPlugin

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. 

Answer 1

您可以将Vue-Lodash插件用于VUE，该插件在Vue模板中提供Lodash，您的代码将起作用。

安装它(npm i vue-lodash(并配置Vue以使用它：

import Vue from 'vue'
import VueLodash from 'vue-lodash'
Vue.use(VueLodash, options)

，您可以像在header.vue中一样在vue模板中使用lodash：(

Answer 2

这不应与webpacker，webpack或supplyplugin有关。您可以通过从组件访问_(即在创建的挂钩中(来轻松检查此问题。

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

模板表达式是沙盒，只能访问数学和日期等全球范围的白名单。您不应尝试在模板表达式中访问用户定义的全球范围。

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

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

但是，在VUE中不建议使用_或$作为前缀或名称，因为框架本身保留了很多这些名称(源(：

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

链接1link2

因此，您可以只使用" lodash"而不是" _'。

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

...

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

---

在野外，实际访问lodash的方法如_全球是：

• 将lodash添加到Vue原型：

Vue.prototype._ = _

或

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

来源

• 如前所述，将其添加为插件

源