用 webpacker 导入第三方库最干净的方法是啥？

Posted 2023-05-09

【中文标题】用 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);

【参考方案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);