用 webpacker 导入第三方库最干净的方法是什么？答案

【问题标题】：What's the cleanest way to import a third party library with webpacker?用 webpacker 导入第三方库最干净的方法是什么？
【发布时间】：2021-04-14 10:00:11
【问题描述】：

我正在尝试在 Rails 项目中使用 BeePlugin package，它提出了如何使用 Webpacker 正确导入库的问题？

我添加了 jQuery，但不知何故我无法添加蜜蜂插件。我希望能够仅在我需要的文件中导入我需要的内容

到目前为止，我所做的是

用yarnyarn add @mailupinc/bee-plugin安装库
创建了一个新文件来添加我的代码并将其导入 application.js import ./bee
在新文件中导入我的库。我努力了
- import "@mailupinc/bee-plugin"
- import Bee from "@mailupinc/bee-plugin"
- import * as Bee from "@mailupinc/bee-plugin"
- const Bee = require "@mailupinc/bee-plugin"

它们似乎都不起作用。为什么？
我总是得到Uncaught ReferenceError: Bee is not defined

供参考应用程序.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "./bee";

webpack/environment.js

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

// Avoid using require and import and alias jquery
environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
  })
);

module.exports = environment

bee.js

import Bee from "@mailupinc/bee-plugin";

function initBee() {
  $.ajax({ url: "/editor/token", success: startBee });
}

function beeConfig() {
  return {...} // Config params
}

function startBee(auth) {
  const beeInstance = Bee.create(auth, beeConfig(), (instance) => {
    $.ajax({
      url: $("#bee-plugin-container").data("template"),
      success: (template) => instance.start(template),
    });

    return instance;
  });
}

$(document).on("turbolinks:load", initBee);

【问题讨论】：

标签： javascript ruby-on-rails webpack webpacker

【解决方案1】：

所以导入没有问题。

原来库将在实例初始化期间异步导入外部脚本，并且该脚本是定义 create 方法的位置 (source code here)

文件现在看起来像

import Bee from "@mailupinc/bee-plugin";

function initBee() {
  $.ajax({ url: "/editor/token", success: startBee });
}

function beeConfig() {
  return {...}
}

function startBee(auth) {
  $.ajax({
    url: $("#bee-plugin-container").data("template"),
    success: (template) => new Bee(auth).start(beeConfig(), template),
  });
}

$(document).on("turbolinks:load", initBee);

【讨论】：