Parcel does nothing and is not recognized as a command

Question

I installed Parcel with npm, everything installed fine without errors. I have a package.json like this:

{
    "name": "example",
    "version": "0.1.0",
    "source": "src/index.js",
    "main": "dist/index.js",
    "scripts": {
        "build": "parcel build"
    },
    "devDependencies": {
        "parcel": "^2.0.1"
    }
}

I'm just following the instructions on the website, but when I run npm run build it just says:

Debugger attached. Waiting for the debugger to disconnect...

Then it goes back to the command prompt. No files are touched or created. And actually parcel is not recognized as a command in the terminal. I tried uninstalling and re-installing Parcel but it still didn't work.

I did get some success with npx parcel build src/index.js , but the behaviour seemed weird to me. It looked like it installed Parcel all over again and left a .parcel-cache folder in my directory. It did produce an output js but all it did to the js was change the one global variable to something with a long string of numbers in the name. I just want to minify js. After npx runs that command the terminal freezes. Is that normal?

Answer 1

I've copied your example and everything runs as expected. You might want to remove the complete node_modules folder and npm i again.

Also, as a clean test, close your browsers. I'm not sure what your dev stack / environment is and there might be debuggers open in eg Chrome.

By the way, if parcel is not installed globally with the -g flag it's very possible the cli does not recognize the command. It's then only executable via script.

Answer 2

It looks like you're having two problems - actually getting parcel installed correctly and getting unexpected output when you run it. For the first problem, I can't repro it with the config you provided, and I don't have any ideas beyond what Jos Faber already suggested in his answer.

For the second problem - when you run npx parcel , you are expecting minified output, but don't get it. That's because of the "source" and "main" fields in your package.json. These are intended to be used by library authors - ie people creating npm packages that get consumed by other projects rather than sent to the browser. You (typically) wouldn't want to minimize your distributed library code because it would interfere with the ability of people who used it to debug, tree-shake, and minimize their apps, so parcel doesn't do this by default. See parcel docs :

By default, optimization is enabled during production builds (parcel build), except for library targets [emphasis added].

If you're developing a web app, you'll want to remove "source" and "main" from package.json and change your cli command to parcel build src/index.js (parcel will put the output in a dist folder by default, but if you want to change that, use the --dist-dir cli flag ).

On the off chance that you actually want to minify a library, you could do this by adding targets configuration to your package.json:

{
  ...
  "targets": {
    "main": {
      "optimize": true
    }
  }
}