带有 Javascript 库的 Ruby on Rails 6 Webpack

Question

我正在 Rails 6 中构建一个新项目。我有一个我想使用的前端库 (@tarekraafat/autocomplete.js)，它由 yarn 安装并存在于我的 node_modules 目录中，但不提供给浏览器中的其他 JS 代码。这是我目前设置的：

/package.json:

"dependencies": {
  "@tarekraafat/autocomplete.js": "^8.2.1"
}

/app/javascript/packs/application.js:

import "@tarekraafat/autocomplete.js/dist/js/autoComplete.min.js"

/app/views/.../example.html.erb

<script type="text/javascript">
  window.onload = () => {
    new autoComplete({
      [...]
    });
  };
</script>

我在指向new autoComplete() 的浏览器中遇到错误：

未捕获的引用错误：未定义自动完成

一些读数似乎表明我需要修改/config/webpack/environment.js 文件，我在其中尝试了以下各种版本，但没有成功（包括重新启动开发服务器）：

/config/webpack/environment.js:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        autoComplete: 'autocomplete.js'
    })
);

module.exports = environment

首先，我需要做些什么来添加这个库才能正确使用它？二、作为之前没有直接使用过webpack的人，把这个定义加到environments.js文件有什么作用，为什么我对一些库（bootstrap、popper）不需要这样做，而我对其他库需要这样做（jquery，也许还有 autocomplete.js）？

Answer 1

在 Webpacker 中，这个库的用法如下：

// app/javascript/src/any_file.js

import autoComplete from "@tarekraafat/autocomplete"

new autoComplete(...)


// app/javascript/packs/application.js

import "../src/any_file"

仅此一项不会将autoComplete 变量导入全局范围。为此，最简单的方法是在 webpack 依赖图中将变量分配给 window。

// app/javascript/src/any_file.js

import autoComplete from "@tarekraafat/autocomplete"

window.autoComplete = autoComplete

顺便说一句，您不需要为此库使用ProvidePlugin 配置。 ProvidePlugin 说：“将此导入添加到我的依赖关系图中的所有文件中。”这可能有助于 jQuery 之类的东西使遗留的 jQuery 插件在 webpack 中工作。没有必要让你的自动完成库工作