如何使用Webpack编译寓言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包装。由于有了fable-splitter的说明，我已经成功地使用here进行了编译，但是我想坚持使用单一的编译方案，所以我也希望使用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将包含一个运行时。