Separating Frontend & Backend Dependencies with Gulp/Yarn

Question

I want to use yarn instead of bower + npm. Yarn uses package.json and does not separate between frontend and backend packages.

I read so far, that I need to separate my frontend + backend dependencies with gulp: How to use one package manager for backend and frontend? (Yarn/NPM)

My app uses the MEAN stack. Currently, I'm using e.g. wiredep to inject all frontend dependencies into my index.html.

Question: How can I automatically separate the frontend dependencies from the backend dependencies in my build process?/Is there any option to specify frontend/backend packages with yarn?

Answer 1

Let me introduce handpick that lets you target and filter multiple dependencies. I wrote this to speed up CI stages that just need a fragment of the devDependencies but there are eventually more usecases. This project is quite experimental - please leave some feedback.

Installation

Install on your system:

npm install handpick --global

Usage

Run the command:

handpick [options]

-V, --version
-T, --target
-F, --filter
-M, --manager
-P, --path
-h, --help

Examples

Define unofficial dependencies inside package.json file:

{
    "lintDependencies":
    {
        "eslint": "6.8.0"
    },
    "testDependencies":
    {
        "mocha": "7.1.1"
    }
}

Install the lintDependencies:

handpick --target=lintDependencies

Install the devDependencies and lintDependencies via YARN:

handpick --target=devDependencies --target=lintDependencies --manager=yarn

Install the devDependencies without testDependencies:

handpick --target=devDependencies --filter=testDependencies

Install the dependencies and devDependencies within path:

handpick --path=../shared