使用 webpack 编译寓言生成的代码答案

【问题标题】：Compile fable generated code with webpack使用 webpack 编译寓言生成的代码
【发布时间】：2017-06-29 12:33:29
【问题描述】：

我的 test.fsx 看起来像：

module Test
#r "./node_modules/fable-core/Fable.Core.dll"
open Fable.Core
open Fable.Import.Browser
type ItemCompletedData    = {itemsCompleted:int}
type AddData              = {text:string}
[<Pojo>]
type ActionData =
  | ItemCompleted of ItemCompletedData
  | Add of AddData
let test = (Add {text="hello world"})
console.log(test)

编译：

node node_modules/fable-compiler/index.js --projFile test.fsx -o ./js/

webpack.config.js 看起来像：

var path = require("path");
module.exports = {
  entry: {
    main: ["./js/test.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: ".",
    filename: "[name].js"
  }
  ,devServer: {
    contentBase: path.join(__dirname, "./"),
    compress: true,
    port: 9000
  }
};

使用以下命令运行 webpack：

node node_modules/webpack/bin/webpack.js --devtool source-map

这会发出警告：

./~/.0.7.26@fable-core/umd/Symbol.js 中的警告 3:24-31 严重依赖关系：require函数的使用方式是依赖关系不能静态提取

./~/.0.7.26@fable-core/umd/Util.js 中的警告 3:24-31 严重依赖关系：require函数的使用方式是依赖关系不能静态提取

打开使用 main.js 的 html 文件时，我在控制台中收到错误：

Symbol.js:3 Uncaught Error: Cannot find module "."

symbol.js 来自fable-core/umd/Symbol（在寓言生成的脚本中）。当我手动将其更改为：fable-core/Symbol（适用于所有 fable-core 依赖项）时，我可以在没有警告的情况下进行 webpack 编译，并且不会在页面中出现错误。

如何在不手动更改寓言输出的情况下防止此错误？

【问题讨论】：

标签： webpack fable-f#

【解决方案1】：

在写这个问题时，我正在执行这些步骤并尝试将-m es2015 添加到寓言编译器命令中。

这就是解决方案。

现在fable code可以加载我只需要解决riot生成的js代码产生的问题。我需要在设置 riot.mixin 后加载标签，所以我将它们加载到嵌套的 requiejs umd 语句中（可能会导致错误）。

require riot
  ... require tag1 tag2 ...

【讨论】：