Giter VIP home page Giter VIP logo

svelte-with-rdf-libs-webpack's Introduction

Getting RDF libs to work with Svelte (using webpack)

I created this template because I had problems with a standard Svelte rollup built template, and found that switching to webpack enabled me to use the RDF libraries I was trying out. This appears to be due to the libraries using outdated exports rather than default or named exports, though I have not verified that.

The result here is a test component for each of the libraries listed in src/App.svelte:

import TestRdfjs from "./TestRdfjs.svelte"; // Rdfjs adds 260K to bundle.js 1.4M to bundle.js.map
import TestGraphy from "./TestGraphy.svelte"; // graphy adds 360K to bundle.js 1.5M to bundle.js.map (using only the Turtle reader)
import TestRdflib from "./TestRdflib.svelte"; // rdflib.js adds 606K to bundle.js 2.6M to bundle.js.map
import TestLDFlex from "./TestLDFlex.svelte"; // LDFlex + Comunica add 1.4M to bundle.js 5.3M to bundle.js.map

How to use RDF libraries in Svelte

To use any of the RDF libraries listed above you can probably just use a standard webpack.config.js or copy the one from this project, but note that to use rdflib.js you need to add the following 'externals' in your webpack.config.js:

  externals: {
    'node-fetch': 'fetch',
    'solid-auth-cli': 'null',
    'fs': 'null-fs'
  },

I expect other libaries will work with the same webpack.config.js.

Get started

To create a new project based on this template using degit:

npx degit sveltejs/svelte-with-rdf-libs-webpack
 svelte-with-rdf-libs-webpack

cd svelte-with-rdf-libs-webpack

Install the dependencies...

cd svelte-app
yarn

...then start webpack:

yarn dev

Navigate to localhost:8080. You should see each component produce output in the browser (and the browser console). Edit a component file in src, save it, and the page should reload with your changes.

Deploying to the web

With now

Install now if you haven't already:

yarn global add now

Then, from within your project folder:

now

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

Install surge if you haven't already:

yarn global add surge

Then, from within your project folder:

yarn build
surge public

svelte-with-rdf-libs-webpack's People

Contributors

happybeing avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.