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

Question

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

我添加了 jQuery 但不知何故我无法添加 bee-plugin。我希望能够导入 我需要的并且只导入我需要的文件

到目前为止我所做的是

用纱线安装库yarn 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"

None 其中似乎有效。为什么？
我总是 Uncaught ReferenceError: Bee is not defined

供参考 application.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);

Answer 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);

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

What's the cleanest way to import a third party library with webpacker?

javascript

ruby-on-rails

webpack

webpacker