如何使用 Webpack 和 Coffee 配置 BaconJS

Question

我正在将遗留代码移植到 Webpack 并且我有以下...

TS 中的依赖加载器

import "baconjs/dist/Bacon.js"

Coffee 中的模块

@stream = new Bacon.Bus()

当我尝试运行我得到

zone.js?fad3:269 Uncaught ReferenceError: Bacon is not defined

我尝试将其添加到我的 webpack 配置中....

new webpack.ProvidePlugin({
    ...
    Bacon: "Bacon"
}),

但这并没有帮助。

Module not found: Error: Cannot resolve module 'Bacon' in ...

我该怎么做才能解决这个问题？

Answer 1

问题可能出在导入模块上。

Import a module for side-effects only

Though not recommended practice, some modules set up some global state that can be used by other modules. These modules may not have any exports, or the consumer is not interested in any of their exports. To import these modules, use:
import "./my-module.js";

Bacon.js 是一个 UMD 模块，您不能以这种方式导入它。尝试

import {Bacon} from "baconjs/dist/Bacon.js";

或在 CS 中：

Bacon = require('baconjs/dist/Bacon.js')

并确保在路径中。

Answer 2

之前的答案是正确的，但我犹豫是否必须在每个需要它的咖啡脚本文件中包含 Bacon = require("baconjs/dist/Bacon.js")。所以我继续将以下内容添加到我的 Typescript 依赖文件中...

window['Bacon'] = require('baconjs/dist/Bacon.js');

这似乎已经奏效，并且不需要对每个 coffeescript 文件分别进行 require ;-)。

我最初尝试过

window.Bacon = require('baconjs/dist/Bacon.js');

但是 Typescript 不喜欢它(How do you explicitly set a new property on `window` in TypeScript?)

如何使用 Webpack 和 Coffee 配置 BaconJS

How do I configure BaconJS with Webpack and Coffee

typescript

coffeescript

webpack

bacon.js

Import a module for side-effects only