Watch more than one folder with Parcel and remove console logging

Programming Questions
1

I am wondering how to configure my package.json with Parcel so it can watch multiple folders, here is the JSON I have so far:

{
    "name": "ProjectName",
    "private": true,
    "version": "0.1.0",
    "description": "Example for Parcel",
    "main": "server.js",
    "scripts": {
        "dev": "concurrently \"npx nodemon server.js -e js,hbs,json,\" \"npx parcel watch ./folder_for_first_bundle/index.js -d ./public/js/build/\" ",
        "second": "concurrently \"npx nodemon server.js -e js,hbs,json,\" \"npx parcel watch ./folder_for_second_bundle/index.js -d ./public/js/build/\" ",
        "build": "npx parcel build ./folder_for_first_bundle/index.js -d ./public/js/build",
        "secondBuild": "concurrently \"npx nodemon server.js -e js,hbs,json,\" \"npx parcel watch ./folder_for_second_bundle/index.js -d ./public/js/build\ -o second_bundle.js" ",
        "start": "npm run dev"
    },
    "license": "BSD-3-Clause",
    "devDependencies": {
        "concurrently": "^5.2.0",
        "nodemon": "^2.0.3",
        "parcel-bundler": "^1.12.4"
    },
    "dependencies": {
        "dotenv": "^8.2.0",
        "express": "^4.17.1",
        "hbs": "^4.1.1",
        "lodash": "^4.17.15",
        "mysql": "^2.18.1",
        "vhost": "^3.0.2"
    }
}

If I run npm run second in command line, it starts the server fine, and seems to be getting files from that folder. However, no bundle is created. I guess I could point each bundle to their own folder, but that seems like that optimal…

Also, I am not sure where to put the option to remove console logging. So 2 questions in this thread.

Thanks for any help! :slight_smile:

2

Multiple Bundles

You can watch multiple files by passing multiple files to the parcel command. Anything before the -d is a source file, and the thing after the -d is the directory where the output files will appear.

"dev": "npx parcel ./src/index.js ./src/other.js -d ./build/bundles",
"build": "npx parcel build ./src/index.js ./src/other.js -d ./build/bundles",

The settings above will create these two output files in build/bundles/ like this:

$ tree build
build
└── bundles
    ├── index.js
    ├── index.js.map
    ├── other.js
    └── other.js.map

1 directory, 4 files

Removing console.log in Production

You can use Babel to remove the console.log statements.

EDIT: my code didn’t work with Parcel. My Babel config worked with Babel by itself but not with Parcel + Babel. I think it might be a bug with Parcel.

Unless someone has a better idea, you could either:

1. Replace console.log with your own logging function

// filename: logger.js
export function log(...args) {
    if (process.env.NODE_ENV === "production") {
        return;
    }

    console.log(...args);
}

Then in your other files, import the new log function and replace all the console.logs with log like this:

import { log } from "./logger";

log("this won't print anything in the production build");

2. Switch to another bundler like Webpack

This might take a little work to set up, but it should work.

If there are any Babel/Parcel users out there who might know how to use different Babel plugins based on whether NODE_ENV is production, or if anyone wants to try to get it working, here are details about the problem I encountered:

I can get the console.log statements removed, but it removes them in development as well as production, which is just like not using console.log at all. I added code to switch Babel plugins based on whether it was development or production, and that worked with Babel when I ran Babel directly, but not when Parcel was running. I put additional notes about the problem in the README of my sample project.

I spend a few hours trying to figure out things work and this is some of what I found:

  • This Github issue suggests that env in the JSON config files might be deprecated in the current version(?) Docs for the older Babel 6 contain a section on it but I don’t see it in the docs for Babel 7.
  • Parcel bundler might not support Babel config files in JS format.
  • But Jest (a popular testing library) might not support Babel files in JSON format. (A comment below that suggests that it can work by doing 'babel-jest': { useBabelrc: true }.)
  • There might be some way to fix it with a more complex config, but I didn’t get that far.
  • Babel’s docs for config files are here.
  • The docs for using Babel with Parcel are here.
1 Like
4

Wow, thanks for the detailed answer Josh. I had thought about webpack. I did research removing console logging, and saw that some people had configured a babelrc or something? I will work on this and post back.

I may go with webpack, will see. :slight_smile:

5

That’s what my code does above. :slight_smile:

The code that normally works for a Babel config file isn’t being picked up by Parcel, though it does work with Babel when Babel is used directly. That’s why I think it might be a bug with Parcel.

Here’s the .babelrc:

1 Like