Giter Club home page Giter Club logo

cherry-pick's Introduction

cherry-pick ๐Ÿ’โ›๐Ÿ“ฆ

Build tool to generate proxy directories with package.json files such as this:

{
  "name": "redux-saga/effects",
  "private": true,
  "main": "../lib/effects.js",
  "module": "../es/effects.js"
}

Why?

When it comes to "main" entry points of our libraries we have an easy way for supporting both CJS & ESM files with respectively "main" and "module" fields in package.json. This allows resolution algorithms to chose a file with the best format automatically. However if we have multiple files in a package and we want all of them to be importable we often suggest to users doing it like this:

import module from "package/lib/module";

There are problems with this approach:

  • it is often encouraging people to import files authored in CJS format, which if produced with tools like babel has i.e. interop helper functions deoptimizing imported file size when comparing to the same file authored in ESM format. Also webpack just bails out on CJS files when trying to optimize your application size with techniques such as tree-shaking & scope hoisting (a.k.a module concatenation).
  • it is exposing internal directory structure to the user. Why lib is in the requested path? If you ship both CJS & ESM directories to npm and if users would like to import appropriate file depending on the tool they are "forced" to remember this and switch between importing the same thing with paths like package/lib/module and package/es/module. This is a mental overhead that can be avoided.

This technique was also described by me in more details in this article.

CLI Options

default

cherry-pick [input-dir]

Create proxy directories

Commands:
  cherry-pick [input-dir]        Create proxy directories              [default]
  cherry-pick clean [input-dir]  Cleanup generated directories

Options:
  --help, -h     Show help                                             [boolean]
  --version, -v  Show version number                                   [boolean]
  --cjs-dir                                                     [default: "lib"]
  --esm-dir                                                      [default: "es"]
  --types-dir
  --cwd                                                           [default: "."]
  --input-dir                                                   [default: "src"]

clean

cherry-pick clean [input-dir]

Cleanup generated directories

Options:
  --help, -h     Show help                                             [boolean]
  --version, -v  Show version number                                   [boolean]
  --cwd                                                           [default: "."]
  --input-dir                                                   [default: "src"]

JS API

cherry-pick exports a default method which creates proxy directories and clean which removes them. Both accepts the same options as corresponding CLI commands, only they are camelCased.

const { default: cherryPick, clean } = require("cherry-pick");

cherryPick({ inputDir: "source" })
  .then(cherryPicked =>
    console.log(`Created proxy directories: ${cherryPicked.join(", ")}`)
  )
  .then(() => clean({ inputDir: "source" }))
  .then(removed =>
    console.log(`Removed proxy directories: ${Removed.join(", ")}`)
  );

cherry-pick's People

Contributors

andarist avatar jquense avatar markmartirosian avatar trysound avatar

Watchers

 avatar  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.