如何使用 Webpack 编译 Fable VS Code 插件？

Question

module App

open Fable.Import

let activate (ctx : vscode.ExtensionContext) =
    printfn """Congratulations, your extension "fable-vscode-helloworld" is now active!"""

    vscode.commands.registerCommand("extension.helloWorld", fun _ ->
        let _ = vscode.window.showInformationMessage("Hello World!",[||])
        null
        )
    |> ctx.subscriptions.Add

let deactivate () = ()

以上需要Fable.Import.VSCode包。由于 here 的说明，我已经成功地使用 fable-splitter 编译了上述内容，但我想坚持使用单一编译方案，所以我想让它使用 webpack 进行编译还有。

var path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/App.fsproj",
    output: {
        path: path.join(__dirname, "./public"),
        filename: "bundle.js",
    },
    devServer: {
        publicPath: "/",
        contentBase: "./public",
        port: 8080,
    },
    module: {
        rules: [{
            test: /\.fs(x|proj)?$/,
            use: "fable-loader"
        }]
    }
}

这是我的webpack.config.js。我在项目中使用的模板是 Fable 文档中的标准模板。

ERROR in ./src/App.fs
Module not found: Error: Can't resolve 'vscode' in 'E:\Webdev\Fable\js-test\src'
 @ ./src/App.fs 2:0-53 6:16-24 7:4-11
 @ ./src/App.fsproj

当我尝试使用 webpack 构建它时，它抱怨无法解析 vscode。我应该在这里做什么？

Answer 1

您需要将 vscode 声明为外部依赖项，以便 Webpack 知道它不应尝试将扩展直接捆绑到您的代码中。 VSCode 将在需要时在运行时包含。

您需要将此添加到您的 webpack.config.js。

  externals: {
    "vscode": "commonjs vscode",
  }

如何使用 Webpack 编译 Fable VS Code 插件？

How to compile a Fable VS Code plugin with Webpack?

webpack

visual-studio-code

fable-f#