How to set dev and prod targets in Parcel

Question

Please can anyone shed some light on how "Targets" work in Parcel, or at least how to separate unminified dev and minified prod files. The sparse documentation just raises further questions and no amount of Googling will find a solution. I am new to Parcel and to the modular nature of newer Javascript syntax.

This all started when I noticed that parcel watch does not minify/uglify the JS, and I don't want that to end up on the prod server. But parcel build WILL minify/uglify the JS. So it would be really swell if my start script could bundle files into build/wp-content/themes/yourproject/assets--dev and the build script could bundle files into build/wp-content/themes/yourproject/assets. That way I can put assets-dev in .gitignore and use those while building the site. Or is that even the proper way to acheive this? In Gulp you can just define different tasks or create one task to do both of these outputs, but I cannot find a way to do this in Parcel.

Description of the project - It's a WordPress site so I can't necessarily feed Parcel source html files to scan. Parcel is really just bundling JS and SCSS files, we are replacing our old Gulp setup. So in package.json, I have this (I'll explain what I have tried in "scripts" and in "targets" further down):

{
  "name": "localtesting2",
  "version": "1.0.0",
  "description": "## Overview",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets--dev",
    "build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "smoothscroll-polyfill": "^0.4.4"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.3.2",
    "autoprefixer": "^10.4.2",
    "parcel": "latest",
    "parcel-bundler": "^1.12.5",
    "parcel-resolver-ignore": "^2.0.0",
    "postcss": "^8.4.6",
    "postcss-modules": "^4.3.0",
    "sass": "^1.49.8",
    "webfontloader": "^1.6.28"
  },
  "targets": {
    "default": {
      "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
      "distDir": "build/wp-content/themes/yourproject/assets"
    }
  },
  "parcelIgnore": [
    "images/*.*",
    "webfonts/*.*"
  ]
}

The root of the project is like this:

build/

-- build/wp-admin

-- build/wp-content

-- etc all the WordPress core/theme files that will ultimately end up on the server

The dev directory looks like this, basically just holding the source code for JS and CSS that get compiled into the theme:

In "scripts" I have tried setting "start" and "build" both with and without the --dist-dir flag. And I remove the "targets" object from package.json when I try --dist-dir.

For "targets", I can't find clear documentation/examples on what exactly goes here so I just tried anything I could think of. I have tried all of the following but nothing works the way I am intending it to. Parcel picks either assets-dev or assets and compiles everything there, it won't separate the code. Sometimes it will just compile files into a dist folder, which I am not using.

"targets": {
    "start": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

"targets": {
    "watch": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

"targets": {
    "default": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

"targets": {
    "dev": {
        "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "prod": {
        "distDir": "build/wp-content/themes/yourproject/assets"
    }
},

Ultimately I am looking for how to get unminified assets into one folder that I can conditionally load, and minified assets into another folder that will get loaded on the prod server.

score 2 · Answer 1 · answered Apr 04 '22 at 15:11

I figured it out. The CLI commands in the "scripts" portion of package.json can include the --target flag. This way you can name a target and then define it in the "targets" property. This is the working package.json:

{
  "name": "localtesting2",
  "version": "1.0.0",
  "description": "## Overview",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target default",
    "build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "smoothscroll-polyfill": "^0.4.4"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.3.2",
    "autoprefixer": "^10.4.2",
    "parcel": "latest",
    "parcel-bundler": "^1.12.5",
    "parcel-resolver-ignore": "^2.0.0",
    "postcss": "^8.4.6",
    "postcss-modules": "^4.3.0",
    "sass": "^1.49.8",
    "webfontloader": "^1.6.28"
  },
  "targets": {
    "default": {
      "distDir": "build/wp-content/themes/yourproject/assets--dev"
    },
    "build": {
      "distDir": "build/wp-content/themes/yourproject/assets"
    }
  },
  "parcelIgnore": [
    "images/*.*",
    "webfonts/*.*"
  ]
}

Still though there must be a better workflow for this, or maybe a way to get the watch command to minify everything like build does.

How to set dev and prod targets in Parcel

1 Answers1