带有cropperjs（或任何javascript包）的Rails 6 webpacker答案

【问题标题】：Rails 6 webpacker with cropperjs (or any javascript package)带有cropperjs（或任何javascript包）的Rails 6 webpacker
【发布时间】：2020-10-19 05:39:46
【问题描述】：

我了解如何使用 yarn 包含包。我遇到的问题实际上是我安装的任何 javascript 包。但是我用cropperjs作为一个具体的例子。

纱线安装cropperjs

安装相关文件，可以在/node_modules/cropperjs下找到

import Cropper from "cropperjs"
or
require("cropperjs")

我认为它正在向 webpack 添加正确的包，因为当我在打包的 json 中进行搜索时，我在应用程序 js 文件中看到对cropper 的引用

/* harmony import */ var cropperjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! cropperjs */ "./node_modules/cropperjs/dist/cropper.js");
/* harmony import */ var cropperjs__WEBPACK_IMPORTED_MODULE_4___default =

/#PURE/webpack_require.n(cropperjs__WEBPACK_IMPORTED_MODULE_4__);

但我不知道如何阅读它，所以我假设相关的 js 正在被添加到全局 application.js 文件中。

但是，我无法在调试器中访问 Cropper，也无法在调用设置对象时访问。

我已尝试阅读尽可能多的文档，但我一生无法弄清楚如何通过 webpacker 访问包含或必需的 javascript 库中的函数调用。

这在资产管道中是微不足道的，我可以恢复，但似乎这是我们应该朝着的方向，但即使是像现代前端开发这样的书也使用 TS，我一个 js 的新手，它让事情变得更加复杂。

有人可以帮我找到一个解释，阐明使用 webpacker 为 rails 6 添加 js 包的正确方法，以便可以全局访问添加的包吗？我在使用 jQuery 时遇到了同样的问题，并剪切并粘贴了一些代码以使其可访问

import $ from 'jquery';
global.jQuery = $;
global.$ = $;

但老实说不明白如何为cropper或任何其他js包做类似的事情。

【问题讨论】：

也许我自己的答案，我仍在努力解决我自己非常相似的问题，可能会有所帮助stackoverflow.com/questions/61569415/…

标签： ruby-on-rails webpacker

【解决方案1】：

默认情况下，Webpack 不会将任何模块暴露给全局范围。这包括您编写并与 webpack 捆绑的任何模块，或者您在 node_modules 中使用 yarn 安装的任何模块。

您可以通过多种方式将模块添加到全局范围。

您可以将单个引用分配给全局范围，即window 或global（两者在 webpack 中是相同的）。就像你对 jQuery 所做的那样，你也可以对 Cropper 做：

import Cropper from 'cropperjs'
window.Cropper = Cropper

为小型项目或有限的用例分配对全局对象的引用应该足够了。

【讨论】：