如何在 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. 

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)

您可以在 Vue 模板中使用 lodash，就像在 Header.vue 中所做的那样：)

Answer 2

这不应与 webpacker、webpack 或 ProvidePlugin 相关。 您可以通过从您的组件（即在创建的钩子中）访问 _ 轻松检查这一点。

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

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

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

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

但是，在 Vue 中不建议使用 _ 或 $ 作为前缀或名称，因为框架本身保留了很多这样的名称（Source）：

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

Link1 Link2

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

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

...

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

---

在野外，以 _ 的形式在全局范围内实际访问 lodash 的方法是：

• 在 Vue 原型中添加 lodash：

要么

Vue.prototype._ = _

或

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

Source

• 按照前面的建议将其添加为插件

Source