Rails 6 webpacker with cropperjs(或任何javascript包)

Question

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

纱线安装裁剪器。

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

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

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

/* 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正在添加到全局应用程序.js文件中。

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

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

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

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

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

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

Answer 1

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

有几种方法可以将模块添加到全局范围。

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

import Cropper from 'cropperjs'
window.Cropper = Cropper

为全局对象分配引用应该足以满足小型项目或有限用例的需求。