Search code examples
node.jsnpmlerna

create scafolding generators like react/open-wc using node


I am trying to create a project structure to my team like how it implemented by open-wc or create-react-app just say npm init @open-wc and it asks couple of questions and creates the folder with specified configurations.

I didn't find good articles on google except exploring the github projects.


Solution

  • Maintainer of open-wc here :)

    So to get an npm init script all you need to do is define a bin in your package.json. This is what we use for npm init @open-wc:

      "name": "@open-wc/create",
      "bin": {
        "create-open-wc": "./dist/create.js"
      },
    

    So then for the name you have 2 choices:

    • create-foo will be available via npm init foo
    • @foo/create will be available via npm init @foo

    The generators itself

    That's a rather sad story... we looked around but we didn't find anything that really fit our use case well. There is http://yeoman.io/ which we used initially but it's huge and it meant we had a bootup time of ~30-40 seconds before the menu appeared. We felt we needed to do something so now we roll our own solution.

    It covers what we need now with a fraction of the size (especially by being very careful with dependencies) which reduced our bootup time to about ~5-10 seconds. We thought about promoting it as a separate standalone project but truth be told we don't have the manpower for it. It's just 4 files you can find here https://github.com/open-wc/open-wc/tree/master/packages/create/src - beware as there is no docu and quite some rough edges.

    Still, if you don't find a better solution feel free to join us and with some help, we could make it a separate product.