Giter VIP home page Giter VIP logo

Comments (4)

apowers313 avatar apowers313 commented on August 14, 2024

Great idea and I'm totally supportive of it, but I need some education on which tools to use and how to set them up (e.g. - webpack vs. rollup vs. browserify vs. parcel vs. babel).

Shooting from the hip, I'd probably pick webpack on the browser side since it seems to have browser support; or pick babel on the node.js side (which would go away when import becomes more stable in node.js).

Thoughts?

from webauthn-simple-app.

madwizard-thomas avatar madwizard-thomas commented on August 14, 2024

I'm not an expert either, but from what I've seen browser wise webpack and browserify are mostly used in the final end project to collect or bundle all the libraries and convert it to whatever. Rollup is commonly used to build libraries, but webpack can be used to build libraries as well (it has a section in the manual). Babel is usually used as a plugin for these tools to transpile code.

For the ES6 module you can remove the anonymous function around your code, then at the end add:

 export let WebAuthnHelpers = {
       ...
    };

    export {
        Msg,
        ServerResponse,
        ...
    }

Or just prefix the classes itself with export. Add a module : "filename.js" to your package.json and it will work automatically with users using webpack and rollup using ES6 syntax (import {ServerResponse} from 'webauthn-simple-app';). Note that while the import/export syntax is ES6, usually the rest of the code should target your target browsers so if you use modern features like async (or even class is not supported by IE11 I think) you should probably transpile them using babel (would require to build the ES6 source file as well, otherwise you can just use your source as is).

For the UMD module rollup works pretty easy. Having the ES6 source code, run:
rollup webauthn-simple-app.js --format umd --name WebAuthnSimpleApp --file webauthn-simple-app-umd.js
The output is a module compatible with CommonJS, AMD or browser globals (when included in a plain script tag the library will be available via window.WebAuthnSimpleApp). CommonJS should work with nodeJS as well I assume.

Also for typescript users a type declaration file would be nice (index.d.ts).

from webauthn-simple-app.

apowers313 avatar apowers313 commented on August 14, 2024

Ok, your post above and doing a bit more reading on rollup convinced me.

Any suggestions for how to do distribution? e.g. - create a build directory, store the build results in GitHub, and distribute them through RawGit?

Let me know if you'd enjoy doing a PR for this. :) If not, it will probably be a couple weeks before I get to it since I'm currently playing around with Dockerizing the server.

from webauthn-simple-app.

madwizard-thomas avatar madwizard-thomas commented on August 14, 2024

I'll see if I can create a PR. One thing that would change is that when used with a plain script tag in the browser the individual exports will be put inside a single object (e.g window.WebAuthSimpleApp.Msg rather than window.Msg). Though that probably is a good thing.

I think rawgit would work fine with when the dist files are committed. It would require the build results to be committed (npm would not need that). Unpkg is also an option though I think it only supports UMD modules.

from webauthn-simple-app.

Related Issues (12)

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.