迁移到 webpacker 时未加载包答案

【问题标题】：packages not loaded when migrating to webpacker迁移到 webpacker 时未加载包
【发布时间】：2020-07-09 15:39:41
【问题描述】：

我正在将一个 Rails 应用程序从 sprockets 迁移到 webpacker。我在布局中加载包时遇到问题。我必须手动包含我的包中包含的包。这是意料之中的还是可以解决的？

错误

Uncaught Error: Include d3.js (v3.0.3 or greater) and topojson on this page before creating a new map
    at new l (datamaps.usa.min.js:1)
    at (index):226
(index):298 Uncaught ReferenceError: shortcut is not defined
    at (index):298

app/javascript/packs/client_application.js

require("jquery")
require("shortcut.js/shortcut")
require("topojson")
require("d3/d3.min")
require("js/d3_tip")

client.haml（不工作）

= javascript_pack_tag "client_application"

client.haml(works)

= javascript_pack_tag "client_application"
= javascript_include_tag "shortcut.js/shortcut"
= javascript_include_tag "d3/d3.min"
= javascript_include_tag "topjson"

【问题讨论】：

标签： javascript ruby-on-rails webpack

【解决方案1】：

一般来说，以下工作流程适合我（以d3 为例）：

1.通过yarn添加包

yarn add d3

2。 config/webpack/environment.js

为刚刚添加的包创建别名：

const aliasConfig = {
  'd3': 'd3/dist/d3.js'
};

environment.config.set('resolve.alias', aliasConfig);

别名必须指向包的主 JS 文件，相对于 node_modules 文件夹。

3. app/javascript/packs/application.js

添加导入：

import "d3"

奖金

作为替代方案，您可以跳过 #2 并在 app/javascript/packs/application.js 中添加额外的行，将导入的库分配给全局窗口对象：

window.d3 = d3

【讨论】：