How to compile a Fable VS Code plugin with Webpack?

[mrakgr]

See this. Crossposting it here to increase my chances of getting it answered.

I am really confused at the moment as to how to deal with inbuilt APIs. Importing 3rd party libraries is relatively clear to me, but vscode gets passed in by the extension manager and I am not sure what to do here.

Before I can start work on the bindings for VSCode, I need to figure out how compilation of it would work first.

[mrakgr]

https://reasonml.github.io/docs/en/interop

I am comparing Fable to Reason and am wondering if I can simply dump some JS in the middle of my F# file. That would make it easy to output const vscode = require('vscode'); in the emitted file. It probably is not the right solution, but it would beat just sitting here just wracking my brain and waiting for the answer to come to me.

On that note, I saw some readable Fable code when I used fable-splitter (see here), but the use of webpack as the default template suggests makes it impossible to know what is coming out in the bundle. Though I do not see it as a necessity for large projects, when it comes to small examples being studied for the sake of learning the ability to see what kind of code is being outputted is a great benefit.

[MangelMaxime]

In JavaScript, const vscode = require('vscode'); is equivalent to import * from 'vscode'.

So in Fable you can do something likethat:

let [<Import("*", "vscode")>] vscode: Vscode.IExports = jsNative

If you want to use webpack there is this old repo: https://github.com/LambdaFactory/fable-vscode-demo which is outdated.

If you want, to use fable-spliter, there is somone who starting creating an extension recently. You can find the repo here: https://github.com/7sharp9/fable-vscode-twitch-chatbot

[MangelMaxime]

The solution for webpack is to declare vscode as an external dependency:

  externals: {
    // Who came first the host or the plugin ?
    "vscode": "commonjs vscode",
}

[mrakgr]

Is that all with Webpack? I am trying to get it to work, but I am running into the Command 'Hello World' resulted in an error (command 'extension.helloWorld' not found) error. The two projects (Splitter and Webpack) have the same plugin code and compile successfully, but Webpack is giving me that error.

I do not like Webpack much to be honest, as it just smushes everything together into one 500k file. With the Splitter, I can see the output in readable form and had I the same error there I could pinpoint what is wrong just by looking at it. I would not mind using the Splitter, but it does not seem to have much documentation and I am not sure how to combine it with regular JS files in the same project.

Should I try to make Webpack work or should I look into how to make use of Splitter here? I am looking for the documentation for the later and it does not seem to be much in the way of it. If it wasn't for that VSCode plugin tutorial, I do not think I could have setup Splitter on my own.

[mrakgr]

I got the example that was failing me with Splitter earlier to work now. Splitter it is then.

[MangelMaxime]

Well, Fable-splitter documentation is succinct because it doesn't do much.

You can find it's documentation in it's README.

Fable splitter just generates one JavaScript file per F# file. You can configure a few things like babel options, output-dir, etc.

Also, you probably need to tell webpack what output format you want like: libraryTarget: 'commonjs'.

My advice is to search on the Internet for documentation on how to setup webpack for VSCode. Because your problem is more about understanding Webpack than Fable thing.

Official documentation

[mrakgr]

Also, you probably need to tell webpack what output format you want like: libraryTarget: 'commonjs'.

Yeah, that was it! Now Webpack works as well. Thank you very much.