寓言D3地图样本

Question

我正在尝试运行寓言 D3 map sample and I see it requires a browser server module。当我尝试

npm run build

在d3文件夹下编译

npm run build

> @ build C:\...\d3
> node ../node_modules/fable-compiler

fable-compiler 0.7.50: Start compilation...
Compiled fable-import-d3\Fable.Import.D3.js at 03:00:47
Compiled d3\d3map.js at 03:00:48
Bundling...
Bundled out\bundle.js at 03:00:48

但之后

npm start

浏览器 http://localhost:8080/ 出现未捕获错误，SCRIPT5009 'Symbol' not defined:

   if (typeof globalObj.__FABLE_CORE__ === "undefined") {
    globalObj.__FABLE_CORE__ = {
        types: new Map(),
        symbols: {
            reflection: Symbol("reflection"),
        }
    };

编辑

以上问题仅与 IE11 有关（与 Chrome 无关），添加

即可解决

  <script src="node_modules/core-js/client/core.js"></script>

在index.html

现在 IE11 和最新的 Chrome 版本都提高了

queue.v1.js:14 Uncaught Error
    at newQueue (queue.v1.js:14)
    at queue (queue.v1.js:109)
    at d3.d_map (d3map.fsx:201)
    at d3map.fsx:201

其中 queue.v1.js:14 是

function newQueue(concurrency) {
  if (!(concurrency >= 1)) throw new Error;

因为concurrency为零...（这里指的都是fable-compiler 0.7.50）。

Answer 1

服务器模块只是一个用于托管示例的自定义本地服务器。 Fable 1.0 beta integrates with Webpack and Webpack Dev Server so that's not necessary. I've updated the d3 sample here, can you please give it a try? The new sample also includes the transform-runtime Babel 插件，它会自动在你的包中插入必要的 polyfill（比如 Symbol），所以你不必担心 core.js 依赖 :)

Answer 2

我通过定义 (line 33)

解决了编辑中的错误 (queue.v1.js:14 Uncaught Error)（对于 fable-compiler 0.7.50）

let queue = importDefault<int->obj> "queue"

用int代替unit然后调用

queue(2)

at line 201 而不是空 c.tor queue()

另一种更优雅的解决方案

根据链接到 Alfonso Garcia-Caro 的答案的新 d3 示例的 line 33，我们可以将队列定义替换为

let queue() = importDefault "queue"

然后使用简单的 queue() c.tor without arg

小注

注意用

恢复旧行

let queue = importDefault<unit->obj> "queue"

使用 Fable 1.0（与 Webpack Dev Server 集成）进入新示例不会导致任何错误。奇怪的是，恕我直言，这只是 fable-compiler 0.7.50

中 importDefault 的一种奇怪行为

寓言D3地图样本

Fable D3 map sample

f#

d3.js

fable-f#

另一种更优雅的解决方案