With the release of Fable 2.2 it is now (back) possible to compile .fsx
files. There are some subtle differences in this approach and in this blog post, I'd like to illustrate how your workflow could be.
Using a script file is actually not all that different from the regular Fable approach (see minimal sample). When using webpack, point your entry to your script file and make sure that the fable-loader
is matching .fsx
as well.
...
module: {
rules: [
{
test: /\.fs(x|proj)?$/,
use: {
loader: "fable-loader"
}
}
]
}
...
If for example, the content of the script file is merely to print something like
printfn "Works!
Fable already can compile this to the expected console.log
statement.
Of course logging to the console bearly proves anything. How can we import some dependencies and do something useful?
This is where Paket can really shine. Next to being a great alternative to NuGet, it can also generate a script file that contains references (#r
) to all the listed dependencies.
Paket can be installed as a dotnet cli tool.
dotnet tool install --tool-path .paket Paket --add-source https://api.nuget.org/v3/index.json --framework netcoreapp2.1
Moving forward execute .paket/paket.exe init
to generate an empty paket.dependencies
.
There we can list whatever packages we need.
F.ex.
storage: none
source https://www.nuget.org/api/v2
framework: netstandard2.0
nuget Fable.Browser.Dom 1.0.0-alpha-004 alpha
nuget Fable.React 5.0.0-alpha-005 alpha
After .paket/paket.exe
install, we can generate a load script via .paket/paket.exe generate-load-scripts -f netstandard2.0 -t fsx
.
This creates the following script file:
namespace PaketLoadScripts
#r "C:\\Users\\nojaf\\.nuget\\packages\\fable.core\\2.1.0-alpha-002\\lib\\netstandard2.0\\Fable.Core.dll"
#r "C:\\Users\\nojaf\\.nuget\\packages\\fable.browser.blob\\1.0.0-alpha-001\\lib\\netstandard2.0\\Browser.Blob.dll"
#r "C:\\Users\\nojaf\\.nuget\\packages\\fable.browser.event\\1.0.0-alpha-001\\lib\\netstandard2.0\\Browser.Event.dll"
#r "C:\\Users\\nojaf\\.nuget\\packages\\fable.browser.webstorage\\1.0.0-alpha-001\\lib\\netstandard2.0\\Browser.WebStorage.dll"
#r "C:\\Users\\nojaf\\.nuget\\packages\\fable.browser.dom\\1.0.0-alpha-004\\lib\\netstandard2.0\\Browser.Dom.dll"
#r "C:\\Users\\nojaf\\.nuget\\packages\\fable.react\\5.0.0-alpha-005\\lib\\netstandard2.0\\Fable.React.dll"
Note that storage:none
, will references everything from my global NuGet cache.
With a simple #load
directive we can import the generated script.
#load "../.paket/load/netstandard2.0/main.group.fsx"
.
And from now on we can use our dependencies.
Depending on what editor you are using, you might want to add
#if INTERACTIVE
#r "netstandard"
#endif
below the #load
, as netstandard and fsi will only be fully supported in .NETCore 3.0.
So when does this approach make sense?
- If you are already using Paket.
- When you only have a single file and you feel like a
fsproj
file is a bit of an overkill. - Or when you want to start out small and switch to a
fsproj
when the need arises.
Check out https://github.com/nojaf/fable-fsx-sample for a larger sample.
I hope you enjoyed this blog post and it all makes sense. If you have any suggestions or questions please leave a comment.
Yours truly, Florian