Unable to seperate public from private packages

So I've been using Yarn package manager in my Laravel project to download public javascript libraries like jQuery and bootstrap. My .yarnrc config file has one line to specify the module directory so that all packages are inmideately available.

--modules-folder public/components

This went perfectly fine till I decided to introduce node-sass to my project which is a backend package.

My problem is that node-sass including all its dependencies end up in my public/components folder. Ideally I'd only use Yarn for my public packages and npm for my backend packages (which would end up in node_modules in my project root). But they both use the same package.json file.

Is there a way to split these package managers? Or am I going about this entirely the wrong way.


1 Answers Unable to seperate public from private packages

As I mentioned in my comment, this is a very odd way to set things up. Typically you would do this:

  1. Use a single package manager (NPM or Yarn), because mixing them doesn't usually work well. NPM uses package-lock.json and yarn uses yarn.lock to determine what package version to download so you may end up with dependency mismatches.
  2. Use webpack to create a package bundle, since you are using Laravel you should use Laravel Mix
  3. If necessary you can extract vendor packages to create bundles that have a higher chance of hitting the browser cache.
  4. You can also use SCSS for your stylesheets

Laravel Mix will ensure that only the minimum required files are actually included in the bundle, in addition sources can be minified and you can also set target browser versions to transpile newer ES 6 syntax into compatible JavaScript.

The main reasons to not put the modules directly in your public folder are:

  1. You will need to load them as modules, however IE does not allow that at all.
  2. You will end up putting all the dependencies and dev dependencies of those modules in the public folder which is unessesary.

Overall I think it's best practice to compile your assets.

5 months ago